兔兔：vue3+elemnt自定义table表头

你可以在表格上方添加一个多选框（el-select）来选择需要显示的表头列，选中的列会作为表头的数据来源显示在表格上。这样你可以通过多选框来动态控制表头的显示。以下是一个实现这个需求的完整示例：

<template>
  <div>
    <!-- 多选框用于选择表头列 -->
    <el-select
      v-model="selectedColumns"
      multiple
      placeholder="请选择表头列"
      style="margin-bottom: 20px; width: 300px;"
    >
      <el-option
        v-for="column in allColumns"
        :key="column.prop"
        :label="column.label"
        :value="column.prop"
      />
    </el-select>

    <!-- 表格展示 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 根据选中的表头列动态显示表头 -->
      <el-table-column
        v-for="column in displayedColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      />
    </el-table>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const tableData = ref([]); // 表格数据
    const allColumns = ref([]); // 所有可选的表头列
    const selectedColumns = ref([]); // 多选框中选中的表头列

    // 获取表头和数据
    const fetchTableData = async () => {
      try {
        const { data: response } = await axios.get('/api/tableData');
        tableData.value = response.data;
        allColumns.value = response.columns;
        // 默认显示所有列
        selectedColumns.value = allColumns.value.map(col => col.prop);
      } catch (error) {
        console.error('获取表格数据失败', error);
      }
    };

    // 计算展示的表头列
    const displayedColumns = computed(() => {
      return allColumns.value.filter(column => selectedColumns.value.includes(column.prop));
    });

    onMounted(() => {
      fetchTableData(); // 组件挂载时请求数据
    });

    return {
      tableData,
      allColumns,
      selectedColumns,
      displayedColumns,
    };
  },
};
</script>

<style>
/* 样式可根据需求调整 */
</style>

关键部分：

1. el-select 多选框：

   • 使用 el-select 组件作为多选框来选择表头列，v-model 绑定 selectedColumns，存储用户选中的列。
   • el-option 中的 value 是列的 prop，label 是列的显示名称。

2. 表格的表头动态生成：

   • 使用 computed 来动态生成表头列 displayedColumns，它根据 selectedColumns 过滤出用户选中的列。
   • 在 el-table 中使用 v-for 遍历 displayedColumns 来显示对应的表头列。

3. API 响应结构：

   • 表头数据依然由后端提供，数据结构与之前一样：

     {
       "columns": [
         { "prop": "name", "label": "姓名", "width": "180" },
         { "prop": "age", "label": "年龄", "width": "100" },
         { "prop": "address", "label": "地址", "width": "200" }
       ],
       "data": [
         { "name": "张三", "age": 25, "address": "北京市" },
         { "name": "李四", "age": 30, "address": "上海市" }
       ]
     }
     

4. 默认选中所有列：

   • 在组件挂载时（onMounted 钩子内），默认选中所有列，将 selectedColumns 设置为所有列的 prop 值。

结果：

当你从多选框中选择不同的表头列时，表格会动态更新，显示选中的表头列。