iview 通过多选框动态控制＜Table＞列数

先说需求

1.通过多选框是否选中来控制表格对应的列是否显示,

默认选中全部显示,未选中隐藏,如下图: 上代码

	 <template>
	   <div class="function_list">
          <Button icon="md-search"></Button>
          <Button icon="md-sync"></Button>
          <Button icon="ios-list-box"></Button>
          <Button icon="ios-apps">
            <!-- 下拉框多选 -->
            <Dropdown trigger="click" style="margin-left: 20px">
              <Icon type="md-arrow-dropdown" />
              <DropdownMenu slot="list">
                <CheckboxGroup
                  @on-change="checkAllGroupChange($event,index)"
                  v-for="(item,index) of checkAllGroup"
                  :key="index"
                  v-model="checkAllGroup1"
                >
                  <Checkbox :label="item"></Checkbox>
                </CheckboxGroup>
              </DropdownMenu>
            </Dropdown>
          </Button>
        </div>
         <!-- 展示数据表格 -->
        <Table :columns="columns" :data="data2"></Table>
      <template>

js代码段

<script>
export default {
  data() {
    return {
      // v-model 绑定
      checkAllGroup1: [],
      //循环数组
      checkAllGroup: [
        "供应商编号",
        "名称",
        "地址",
        "联系人",
        "电话",
        "银行",
        "银行卡号",
        "状态",
        "备注",
        "操作",
      ],
      //表头 表头的key值对应要显示的数据
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "供应商编号",
          key: "SupplieNumber",
          align: "center",
        },
        {
          title: "名称",
          key: "name",
          align: "center",
        },
        {
          title: "地址",
          key: "address",
          align: "center",
        },
        {
          title: "联系人",
          key: "contacts",
          align: "center",
        },
        {
          title: "电话",
          key: "Telephone",
          align: "center",
        },
        {
          title: "银行",
          key: "bank",
          align: "center",
        },
        {
          title: "银行卡号",
          key: "BankCardNumber",
          align: "center",
        },
        {
          title: "状态",
          key: "state",
          align: "center",
        },
        {
          title: "备注",
          key: "remarks",
          align: "center",
        },
        {
          title: "操作",
          key: "operation",
          align: "center",
        },
      ],
      //表格展示数据
      data2: [
        //假数据
        {
          SupplieNumber: "9527", //供应商编号
          name: "周星驰", //名称
          address: "香港特别行政区", //地址
          contacts: "吴孟达", //联系人
          Telephone: "18888888888", //电话
          bank: "渣打银行", //银行
          BankCardNumber: "405516466131467979", //银行卡号
          state: "正常", //状态
          remarks: "暂无备注", //备注
          operation: "操作", //操作
        },
        {
          SupplieNumber: "9999", //供应商编号
          name: "胡歌", //名称
          address: "香港特别行政区", //地址
          contacts: "吴孟达", //联系人
          Telephone: "18888888888", //电话
          bank: "渣打银行", //银行
          BankCardNumber: "405516466131467979", //银行卡号
          state: "正常", //状态
          remarks: "暂无备注", //备注
          operation: "操作", //操作
        },
      ],
    };
  },
  mounted() {
    //把循环的数组赋值给双向绑定的值就可达到默认选中的效果
    this.checkAllGroup1 = this.checkAllGroup;
  },
  methods: {
    //@on-change事件 更改时触发
    //@on-change事件要传多个值必须传$event
    //$event 为更改后的数据
    //index 为更改值的下标
    checkAllGroupChange($event, index) {
      console.log("$event", $event, "index", index);
      let data = $event;
      if (index == 0) {
        //判断是否有重复值,如果没有返回-1
        let whether = data.indexOf("供应商编号");
        if (whether == -1) {
          //过滤删除
          this.columns = this.columns.filter(
            (col) => col.key !== "SupplieNumber"
          );
        } else {
          this.columns.splice(1, 0, {
            title: "供应商编号",
            key: "SupplieNumber",
            align: "center",
          });
        }
      } else if (index == 1) {
        let whether = data.indexOf("名称");
        if (whether == -1) {
          this.columns = this.columns.filter((col) => col.key !== "name");
        } else {
          this.columns.splice(2, 0, {
            title: "名称",
            key: "name",
            align: "center",
          });
        }
      } else if (index == 2) {
        console.log("复制以下注释代码,更改indexOf('要判断的值')");
        //  let whether = data.indexOf("要判断的值");
        // if (whether == -1) {
        //   this.columns = this.columns.filter((col) => col.key !== "表头里对应的key值");
        // } else {
        //   this.columns.splice(2, 0, {
        //     title: "名称",
        //     key: "表头里对应的key值",
        //     align: "center",
        //   });
        // }
      }
    },
  },
};
</script>

在记录的同时

希望对做类似功能的朋友有所帮助

如果没有帮助,那你就来打我吧.....哈哈哈哈哈哈!