vue，ts 自定义el-table 动态表头显示隐藏

在Vue中使用Element UI的el-table组件时，可以通过动态绑定表头数据来实现表头的显示和隐藏。以下是一个简单的示例，展示了如何根据条件动态切换表头的显示。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="header in tableHeaders"
      :key="header.prop"
      :prop="header.prop"
      :label="header.label"
      :visible="header.visible">
    </el-table-column>
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
 
export default defineComponent({
  setup() {
    const state = reactive({
      tableHeaders: [
        { prop: 'date', label: '日期', visible: true },
        { prop: 'name', label: '姓名', visible: true },
        { prop: 'address', label: '地址', visible: false },
      ],
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...更多数据
      ]
    });
 
    // 切换表头的显示状态
    const toggleHeaderVisible = (prop: string) => {
      const header = state.tableHeaders.find(h => h.prop === prop);
      if (header) header.visible = !header.visible;
    };
 
    return { ...toRefs(state), toggleHeaderVisible };
  }
});
</script>

在这个示例中，tableHeaders数组定义了表格的表头信息，包括每个列的属性名、标签和是否可见。el-table-column组件的v-for指令用于渲染表头，并通过:visible属性绑定列的显示状态。

toggleHeaderVisible函数用于切换指定列的显示状态。你可以添加一个按钮或其他触发器来调用这个函数，并传递需要切换的列的属性名，以此来控制对应列的显示和隐藏。