element table自定义表头字段显示/隐藏

需求：自定义表格选择表头字段是否展示

自定义表格字段 不展示渠道名称

1. 封装表头字段弹框组件

<template>
    <div class="app-container">
        <el-dialog
          :visible.sync="dialogVisible"
          width="900px"
          @close="closed"
        >
        <h2>列表字段设置</h2>
        <div class="check_box">
            <template v-for="(item,index) in list">
                <el-checkbox
                    v-if="!item.isHide"
                    :key="index"
                    :label="item.label"
                    v-model="item.isChecked"
                    class="check_box_one"
                    @change="changeCkeckList"
                ></el-checkbox>
            </template>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 弹窗
            dialogVisible: false,
            // 选项
            list: [],
        }
    },
    props: {
        columnsVisible: {
            type: Boolean,
            default: false
        },
        columnsList: {
            type: Array,
            default: []
        }
    },
    watch: {
        columnsVisible(val) {
            this.dialogVisible = val;
        },
        columnsList: {
            handler(val) {
                this.list = val;
            },
            deep: true,
            immediate: true
        }
    },
    created() {
        this.dialogVisible = this.columnsVisible;
    },
    methods: {
        changeCkeckList() {
            this.$emit('changeCheckedColumns', this.list);
        },
        closed() {
            this.$emit('closeCheckedColumns');
        }
    }
}
</script>

<style lang="scss" scoped>
.check_box {
  padding: 30px 0;
}.check_box_one {
  margin-right: 30px;
  margin-bottom: 20px;
}
</style>

2. 页面结构

• 引入组件

<!-- 列表字段设置 -->
    <columnsSetDialog
      :columnsList="columnsList"
      :columnsVisible="columnsVisible"
      @changeCheckedColumns="changeCheckedColumns"
      @closeCheckedColumns="closeCheckedColumns">
    </columnsSetDialog>

• 表格中使用

<!-- 表格 -->
    <el-table
      v-table-scroll="'scroolTable'"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      border
    >
      // 循环表头字段
      <template v-for="item in columnsList">
        <el-table-column
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :show-overflow-tooltip="item.tooltip"
          v-if="item.isChecked && !item.isHide"
        >
          <template #default="{row}">
            <!-- 日期 -->
            <div v-if="item.prop === 'statisticsDate'">
              <div>{{row.statisticsDate}}</div>
              <div v-if="!row.statisticsDate">汇总</div>
            </div>
            <!-- 渠道名称 -->
            <div v-if="item.prop === 'channelLinkInfoName'">{{row.channelLinkInfoName || '-' }}</div>
            <!-- 账面消耗(元) -->
            <div v-if="item.prop === 'bookConsume'">{{row.bookConsume === 0 ? 0 : row.bookConsume ? row.bookConsume : '-' }}</div>
            <!-- 真实消耗(元) -->
            <div v-if="item.prop === 'realConsume'">{{row.realConsume === 0 ? 0 : row.realConsume ? row.realConsume : '-'}}</div>
            <!-- 累计账面消耗(元) -->
            <div v-if="item.prop === 'bookConsumeTotal'">{{row.bookConsumeTotal === 0 ? 0 : row.bookConsumeTotal ? row.bookConsumeTotal : '-'}}</div>
            <!-- 累计真实消耗(元) -->
            <div v-if="item.prop === 'realConsumeTotal'">{{row.realConsumeTotal === 0 ? 0 : row.realConsumeTotal ? row.realConsumeTotal : '-'}}</div>
            <!-- ROI -->
            <div v-if="item.prop === 'roi'">
              {{row.roi === 0 ? 0 : row.roi ? row.roi : '-'}}
              <span v-if="row.roi">%</span>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>

3. 页面引入 使用

<script>
import columnsSetDialog from "@/views/components/columnsSetDialog";
export default {
  components: { columnsSetDialog },
data(){
  return{
    tableData: [],
    columnsVisible: false, // 列表字段设置弹窗
    columnsList: [
        // 选中显示的列( minWidth最小宽度, isChecked是否选中显示字段, isHide:隐藏这列且设置弹窗里不显示, fixed是否固定, isSlot: 是否用template渲染, tooltip: 内容被隐藏时显示tooltip)(label,prop,isChecked必填,其他字段需要的列再另加)
        { label: "日期", prop: 'statisticsDate', minWidth: '130', isChecked: true, fixed: true, isSlot: true },
        { label: "渠道名称", prop: 'channelLinkInfoName', minWidth: '120', isChecked: true, isSlot: true },
        { label: "账面消耗(元)", prop: 'bookConsume', minWidth: '120', isChecked: true, isSlot: true },
        { label: "真实消耗(元)", prop: 'realConsume', minWidth: '120', isChecked: true,  isSlot: true },
        { label: "累计账面消耗(元)", prop: 'bookConsumeTotal', minWidth: '160', isChecked: true, isSlot: true },
        { label: "累计真实消耗(元)", prop: 'realConsumeTotal', minWidth: '160', isChecked: true, isSlot: true },
        { label: "ROI", prop: 'roi', minWidth: '120', isChecked: true, isSlot: true }
      ],
  },
  methods:{  
    // 列表字段设置(点击按钮弹框展示)
    setField() {
      this.columnsVisible = true;
    },
    // 关闭选择弹窗
    closeCheckedColumns() {
      this.columnsVisible = false;
    },
    // 回显设置的列表字段
    changeCheckedColumns(data) {
      this.$set(this, 'columnsList', data);
    },
  }
}
</script>