Element ui Table组件动态控制列的显示隐藏

在Element UI的Table组件中，可以通过column属性中的visible字段来动态控制列的显示和隐藏。你可以使用v-for指令结合v-bind来绑定每个列的visible属性到一个响应式数据。

以下是一个简单的例子，展示如何根据一个数组来动态控制列的显示和隐藏：

<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"
      :visible="column.visible">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 数据项
      ],
      columns: [
        { label: '日期', prop: 'date', visible: true },
        { label: '姓名', prop: 'name', visible: true },
        { label: '地址', prop: 'address', visible: true }
      ]
    };
  },
  methods: {
    toggleColumn(prop) {
      const column = this.columns.find(c => c.prop === prop);
      if (column) {
        column.visible = !column.visible;
      }
    }
  }
};
</script>

在这个例子中，columns数组定义了表格的列信息，包括列名和列属性。visible字段用于控制对应列的显示状态。通过toggleColumn方法可以切换指定列的显示状态。在模板中，v-for用于渲染每个列，并通过:visible="column.visible"绑定列的显示状态。