vue element ui table表格--实现列的显示与隐藏

在Vue中使用Element UI时，可以通过el-table-column的v-if指令来控制列的显示与隐藏。你可以在组件的data中设置一个标志数组，用以控制每一列是否显示。

以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180" v-if="columnsVisible[0]"></el-table-column>
    <el-table-column prop="address" label="地址" v-if="columnsVisible[1]"></el-table-column>
    <!-- 更多列 -->
  </el-table>
 
  <el-button @click="toggleColumn(0)">切换姓名列显示</el-button>
  <el-button @click="toggleColumn(1)">切换地址列显示</el-button>
  <!-- 更多切换按钮 -->
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...更多数据
      ],
      columnsVisible: [true, true] // 控制列显示的数组，默认都显示
    };
  },
  methods: {
    toggleColumn(index) {
      this.columnsVisible[index] = !this.columnsVisible[index];
    }
  }
};
</script>

在这个例子中，columnsVisible是一个包含两个布尔值的数组，分别对应两个el-table-column。点击按钮时，会调用toggleColumn方法来切换对应索引的列的显示状态。通过修改columnsVisible数组中的布尔值，Vue将会根据条件重新渲染表格列。