elementplus table选择性展示

Element Plus是一款基于Vue.js的开源UI组件库，它的Table组件允许开发者进行选择性展示。通过设置`show-header`, `show-row`, 或者自定义列的`formatter`函数，你可以动态地控制哪些行或列在表格中显示。例如：

<template>
  <el-table :data="tableData" :selectable="selectable">
    <!-- ...表头... -->
    <el-table-column v-if="showColumn1" prop="column1" label="列1"></el-table-column>
    <el-table-column v-if="showColumn2" prop="column2" label="列2"></el-table-column>
    <!-- ...其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectable: true, // 是否启用选择模式
      showColumn1: false, // 列1是否展示，默认为false
      showColumn2: true, // 列2是否展示，默认为true
    };
  },
  methods: {
    toggleColumnDisplay(columnName) {
      this[`show${columnName}`] = !this[`show${columnName}`];
    },
  },
};
</script>

在这个例子中，当你需要展示或隐藏某列时，可以调用`toggleColumnDisplay('Column1')`这样的方法来切换列的状态。