VUE中el-table-column列实现隐藏

在Vue中，可以通过v-if或v-show指令来控制el-table-column的显示或隐藏。

使用v-if时，列只会在条件为真时被渲染：

<template>
  <el-table :data="tableData">
    <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>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [/* 数据 */],
      showName: false // 控制姓名列是否显示
    };
  }
};
</script>

使用v-show时，不论条件是否为真，列总是被渲染，但是通过CSS控制其显示或隐藏：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180" v-show="showName"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [/* 数据 */],
      showName: false // 控制姓名列是否显示
    };
  }
};
</script>

在这两种情况下，只需要改变showName的值即可控制姓名列的显示和隐藏。