vue中element-plus动态选择表格列的显示与隐藏

工作中的记录

一、html部分（一定要有key值）

<div class="table-box">
          <el-table :data="tableData" max-width="430px">
            <el-table-column type="index" label="序号" width="50px"></el-table-column>
            <el-table-column prop="stationNe" label="站号" v-if="dropCol[0].show" key="0"></el-table-column>
            <el-table-column prop="lineNO" label="设备名称" v-if="dropCol[1].show" key="1"></el-table-column>
            <el-table-column prop="businessType" label="设备类型" v-if="dropCol[2].show" key="2"></el-table-column>
            <el-table-column
              prop="port"
              label="子架-槽位-端口"
              width="105px"
              v-if="dropCol[3].show"
              key="3"
            ></el-table-column>
            <el-table-column prop="alarmNe" label="告警名称" v-if="dropCol[4].show" key="4"></el-table-column>
            <el-table-column prop="advice" label="告警处理建议" v-if="dropCol[5].show" key="5"></el-table-column>
            <el-table-column prop="aTime" label="告警时间" v-if="dropCol[6].show" key="6"></el-table-column>
            <el-table-column prop="cTime" label="清除时间" v-if="dropCol[7].show" key="7"></el-table-column>
            <el-table-column prop="nTime" label="确认时间" v-if="dropCol[8].show" key="8"></el-table-column>
            <el-table-column prop="verify" label="确认人" v-if="dropCol[9].show" key="9"></el-table-column>
            <el-table-column prop="remark" label="备注" v-if="dropCol[10].show" key="10"></el-table-column>
          </el-table>
        </div>

二、js部分

<script>
// 元素内容
const itemOptions = [
  "站号",
  "设备名称",
  "设备类型",
  "子架-槽位-端口",
  "告警名称",
  "告警处理建议",
  "告警时间",
  "清除时间",
  "确认时间",
  "确认人",
  "备注"
];
export default {
  data() {
    return {
      tableData: [
        {
          lineNO: "2016-05-02",
          businessType: "王小虎",
          advice: "上海市普陀区金沙江路 1518 弄"
        },
        {
          lineNO: "2016-05-04",
          businessType: "王小虎",
          advice: "上海市普陀区金沙江路 1517 弄"
        },
        {
          lineNO: "2016-05-01",
          businessType: "王小虎",
          advice: "上海市普陀区金沙江路 1519 弄"
        },
        {
          lineNO: "2016-05-03",
          businessType: "王小虎",
          advice: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      checkAll: false,
      // 选中元素
      checkedItems: [
        "站号",
        "设备名称",
        "设备类型",
        "子架-槽位-端口",
        "告警名称",
        "告警处理建议",
        "告警时间",
        "清除时间",
        "确认时间",
        "确认人"
      ],
      items: itemOptions,
      isIndeterminate: true,
      // 表头数据项的显示，显示为true，不显示为false
      dropCol: [
        {
          label: "站号",
          prop: "stationNe",
          show: true
        },
        {
          label: "设备名称",
          prop: "lineNo",
          show: true
        },
        {
          label: "设备类型",
          prop: "businessType",
          show: true
        },
        {
          label: "子架-槽位-端口",
          prop: "port",
          show: true
        },
        {
          label: "告警名称",
          prop: "alarmNe",
          show: true
        },
        {
          label: "告警处理建议",
          prop: "advice",
          show: true
        },
        {
          label: "告警时间",
          prop: "aTime",
          show: true
        },
        {
          label: "清除时间",
          prop: "cTime",
          show: true
        },
        {
          label: "确认时间",
          prop: "nTime",
          show: true
        },
        {
          label: "确认人",
          prop: "verify",
          show: true
        },
        {
          label: "备注",
          prop: "remark",
          show: false
        }
      ]
    };
  },
  methods: {
    // 全选
    handleCheckAllChange(val) {
      this.checkedItems = val ? itemOptions : [];
      this.isIndeterminate = false;
      // 选择数据项功能
      this.dropCol.filter(i => {
        console.log(i);
        if (this.checkedItems.length > 0) {
          i.show = true;
        } else {
          i.show = false;
        }
      });
    },
    // 单选
    handleCheckedItemsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.items.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.items.length;
      // 选择数据项功能
      this.dropCol.filter(i => {
        if (this.checkedItems.indexOf(i.label) !== -1) {
          i.show = true;
        } else {
          i.show = false;
        }
      });
    }
  },
  mounted() {}
};
</script>