el-table手动选择展示列 vue2

在 Vue2 中，如果你想让`el-table`组件支持用户手动选择展示哪些列，你可以使用`el-table-column`的动态渲染功能以及Vue的`v-if`或`v-show`指令。首先，你需要定义所有可能的列，并赋予它们一个初始状态，比如默认全部显示：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="(column, index) in columns" :key="index" :label="column.title" v-bind:prop="column.prop" v-if="showColumns.includes(index)">
      <!-- 列的内容 -->
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      columns: [
        { title: '列1', prop: 'col1' },
        { title: '列2', prop: 'col2' },
        { title: '列3', prop: 'col3' },
        {/* 更多列... */}
      ],
      showColumns: [0, 1, 2], // 初始显示的列索引数组
    };
  },
  
  methods: {
    toggleColumn(index) {
      if (this.showColumns.includes(index)) {
        this.showColumns = this.showColumns.filter(num => num !== index);
      } else {
        this.showColumns.push(index);
      }
    },
  },
};
</script>

在这个例子中，`columns`是一个对象数组，`showColumns`初始化时包含所有列的索引。当点击某个“隐藏”列按钮时，`toggleColumn`方法会更新`showColumns`，`v-if`则根据这个数组判断列是否应该显示。