el-table自定义表头 ，表头控制数据的展示与隐藏

在Vue.js中使用Element UI库的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"></el-table-column>
    <el-table-column v-if="showAddress" prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="toggleAddress">切换地址列显示</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      showAddress: true
    };
  },
  methods: {
    toggleAddress() {
      this.showAddress = !this.showAddress;
    }
  }
};
</script>

在这个例子中，我们有一个el-table和一个el-button。el-table的:data绑定了一个名为tableData的数组，包含了一些示例数据。第一个和第二个el-table-column是固定显示的列，而第三个列（"地址"）则使用v-if指令来根据showAddress数据属性的值决定是否显示。

点击按钮后，toggleAddress方法会被触发，从而改变showAddress的值，进而通过v-if控制表头的显示与隐藏。