控制el-table的列显示隐藏

在Vue.js中使用Element UI库时，可以通过v-if或v-show指令来控制el-table的列显示和隐藏。

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

<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="showName"></el-table-column>
    <el-table-column prop="address" label="地址" v-if="showAddress"></el-table-column>
  </el-table>
  <el-button @click="toggleName">显示/隐藏姓名列</el-button>
  <el-button @click="toggleAddress">显示/隐藏地址列</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }],
      showName: true,
      showAddress: true
    };
  },
  methods: {
    toggleName() {
      this.showName = !this.showName;
    },
    toggleAddress() {
      this.showAddress = !this.showAddress;
    }
  }
};
</script>

在这个例子中，el-table-column元素使用了v-if指令来根据showName和showAddress数据属性的值决定是否渲染该列。两个按钮用于切换对应的列的显示状态。