自定义表头，选中想要的字段，进行在页面显示

页面设计，其中有页面中的字段如何去处理值，使用了dialog弹框进行选中值，进而在页面当中显示，使用的是ele-plus

 <!-- 表格区域 -->
      <el-table
        :data="filteredData"
        :columns="filteredColumns"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <!-- 表格头部 -->
        <el-table-column
          v-for="column in filteredColumns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :visible="column.show"
        >
          <!-- 表格内容区域 -->
          <template #default="scope">
            <!-- <span>
              {{
                column.prop == "tradingHours"
                  ? scope.row[column.prop].substr(0, 10)
                  : scope.row[column.prop]
              }}</span
            > -->
            <span v-if="column.prop === 'tradingHours'">
              {{ scope.row[column.prop].substr(0, 10) }}
            </span>
            <span v-if="column.prop == 'paymentModels'">
              <span v-if="scope.row[column.prop] == 1">微信</span>
              <span v-else-if="scope.row[column.prop] == 2">支付宝</span>
              <span v-else-if="scope.row[column.prop] == 3">云闪付</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表头选择对话框 -->
      <el-dialog v-model="columnModalVisible" title="选择表头">
        <!-- 表头选择复选框组 -->
        <el-checkbox-group v-model="selectedColumns">
          <!-- 遍历 columns 数组，生成复选框，并将列名作为复选框的标签 -->
          <el-checkbox
            v-for="column in columns"
            :label="column"
            :key="column.prop"
          >
            {{ column.label }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 确定按钮 -->
        <el-button @click="applySelectedColumns">确定</el-button>
      </el-dialog>

因为使用的是vue3的setup语法，进而先定义好值

const SplitStatusList = ref([]); //用于显示的集合
    // 定义表头数据（这里定义的是你页面中你要显示的所有的信息的值，label是名称，prop是字段）
    const columns = [
      { label: "***", prop: "***", show: true },
      { label: "***", prop: "***", show: true },
      { label: "***", prop: "***", show: true },
      { label: "***", prop: "***", show: false },
      { label: "***", prop: "***", show: false },
    ];
    // 定义表头选择状态 （这个是页面中点开就显示的字段）
    const selectedColumns = ref([
      { label: "***", prop: "***", show: true },
      { label: "***", prop: "***", show: true },
      { label: "***", prop: "***", show: true },
    ]);
    
    const columnModalVisible = ref(false);  // 定义表头选择对话框状态
    const multipleTableRef = ref();   
    const multipleSelection = ref([]);       //复选框系列操作
    const handleSelectionChange = (val) => {
      multipleSelection.value = val;
    };

页面以及值定义好之后，编写方法进行页面显示值

// 这个OnlineTradingList是显示的集合
// 定义一个计算属性 filteredData，它是 tableData 数组经过处理得到的新数组
    const filteredData = computed(() => {
      // 使用 map 函数遍历 tableData 数组，并使用 reduce 函数将选中的列的值放入一个新对象中
      return OnlineTradingList.value.map((item) => {
        return selectedColumns.value.reduce((obj, column) => {
          // 使用 obj 对象将选中的列的值添加到新对象中
          obj[column.prop] = item[column.prop];
          return obj;
        }, {});
      });
    });

    // 定义一个计算属性 filteredColumns，它是 columns 数组经过过滤后的新数组
    const filteredColumns = computed(() => {
      return selectedColumns.value; 
    });

    //打开弹框
    const openColumnModal = () => {
      columnModalVisible.value = true;
    };

    //关闭弹框
    const applySelectedColumns = () => {
      columnModalVisible.value = false;
    };

页面展示（选中弹框的值进而在页面展示）