el-table 实现列隐藏

在Element UI的`el-table`中，你可以使用`render-header`和`render-cell`选项来自定义列渲染，包括动态地控制某些列的隐藏。这里是一个基本的例子：

<template>
  <el-table
    :data="tableData"
    ref="table"
    border
  >
    <el-table-column
      prop="name"
      label="Name"
      width="180"
      show-header="always"  <!-- 设置始终显示头部 -->
    ></el-table-column>

    <el-table-column
      v-for="(column, index) in visibleColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :visible.sync="isColumnVisible(index)"  <!-- 使用sync绑定列的可见性 -->
    ></el-table-column>
    
    <template slot-scope="scope">
      <el-table-column
        v-if="!scope.$parent.isColumnVisible(index)"
        :prop="hiddenColumn.prop"
        :label="hiddenColumn.label"
        hidden  <!-- 或者直接设置hidden属性为true，这会隐藏整行而不是单列 -->
      ></el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      visibleColumns: [],  // 初始所有列都可见
      isColumnVisible: (index) => {
        // 根据需要动态设置列的可见性，例如根据某个条件
        // 这里是个示例，实际应用中替换为你的业务逻辑
        return !['hiddenCol1', 'hiddenCol2'].includes(this.columns[index].title);
      },
      hiddenColumn: { prop: 'hiddenProp', label: 'Hidden Column' },  // 隐藏列的配置
    };
  },
  mounted() {
    // 初始化列可见性
    this.visibleColumns = Object.keys(this.columns).map(key => ({ prop: key, label: this.columns[key] }));
  },
};
</script>

在这个例子中，我们在`mounted`钩子初始化了所有列的可见性，然后在循环中只渲染那些当前被`isColumnVisible`函数认为应显示的列。如果需要隐藏特定列，可以在`slot-scope`的模板里添加一个条件检查。