需求：自定義表格選擇表頭字段是否展示

自定義表格字段

不展示渠道名稱

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
    >
      // 循環(huán)表頭字段
      <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>