el-table控制列的显示与隐藏

在Vue.js中使用Element UI库时，可以通过el-table-column的v-if指令来控制列的显示与隐藏。以下是一个简单的示例：

<template>
  <div>
    <el-button @click="toggleColumn">Toggle Column</el-button>
    <el-table :data="tableData">
      <el-table-column prop="date" label="Date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column v-if="showAddress" prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'John',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        date: '2016-05-04',
        name: 'Jane',
        address: 'No. 189, Grove St, Los Angeles'
      }],
      showAddress: true
    };
  },
  methods: {
    toggleColumn() {
      this.showAddress = !this.showAddress;
    }
  }
};
</script>

在这个例子中，我们有一个toggleColumn方法，它会切换showAddress数据属性的布尔值。当showAddress为true时，地址列会显示；为false时，地址列会隐藏。通过点击按钮，可以触发这个方法进行列的显示与隐藏切换。