vue3 el-table动态表头

在 Vue 3 中使用 Element Plus 的 <el-table> 组件实现动态表头，可以通过绑定 table-column 的 prop 属性来动态地改变列的名称或者通过计算属性来动态生成列的配置。以下是一些实现动态表头的方法：

方法1：使用 v-for 指令

你可以在 <el-table-column> 上使用 v-for 指令来动态生成列。这种方式适用于列数和列名在运行时可能会改变的情况。

复制代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width">
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const columns = ref([
  { prop: 'date', label: '日期', width: 180 },
  { prop: 'name', label: '姓名', width: 180 },
  { prop: 'address', label: '地址' }
]);
 
const tableData = ref([
  { date: '2023-04-01', name: '张三', address: '上海市浦东新区' },
  { date: '2023-04-02', name: '李四', address: '北京市海淀区' }
]);
</script>

方法2：使用计算属性动态生成列配置

如果你需要根据某些条件（如用户选择、API响应等）动态改变列的显示，可以使用计算属性。

复制代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in computedColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width">
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const showAddress = ref(true); // 控制是否显示地址列的开关
const tableData = ref([...]); // 你的数据数组
 
const computedColumns = computed(() => {
  return [
    { prop: 'date', label: '日期', width: 180 },
    { prop: 'name', label: '姓名', width: 180 },
    showAddress.value ? { prop: 'address', label: '地址' } : null // 根据 showAddress 的值决定是否包含地址列
  ].filter(Boolean); // 过滤掉 null 值，即不显示的列
});
</script>

方法3：通过插槽自定义表头内容（更复杂场景）

如果你需要更复杂的表头内容（如合并单元格、自定义渲染等），你可以使用 <el-table> 的 header 插槽。这种方法适用于需要高度自定义表头的情况。

复制代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop">
      <template #header>
        <span>{{ column.label }}</span> <!-- 自定义表头内容 -->
      </template>
    </el-table-column>
  </el-table>
</template>

在这个例子中，你可以在 #header 插槽中添加任何自定义的 HTML 或组件，从而实现复杂的表头布局。例如，你可能需要合并某些单元格或者添加额外的按钮和下拉菜单等。这需要你对 Vue 和 Element Plus 有一定的了解，以及对 HTML 和 CSS 有一定的掌握。