iview table动态修改checked状态

背景:公司需要做一个根据列表某个条件相同筛选出可以选择的勾选框,其他禁用。在使用过程中发现,只要是修改了表格的数据结构,iview 表格的on-select-cancel方法就永远不执行,所以才有了自己瞎搞的方案。

我这里是根据age做条件,只要是age相同,就可以选,其他的禁止选择。
不多说,直接上代码:

<template>
  <div>
    <Table
      :row-class-name="rowClassName"
      border
      ref="selection"
      :columns="columns4"
      @on-select="checkChange"
      :data="data1"
    ></Table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      data1: [],
      selectone: ""
    };
  },
  methods: {
    checkChange(selection, row) {
      this.selectone = row.age;
      console.log(row.isCheck);
      const dataList  = JSON.parse(JSON.stringify(this.data1));
      const idx = dataList.findIndex(item => item.name == row.name);
      if (dataList[idx].isCheck) {
        dataList[idx].isCheck = false;
      } else { 
        dataList[idx].isCheck = true;
      }
      console.log(dataList, 666);
      const isTu = dataList.every(tep => {
        return tep.isCheck == false;
      });
      if (isTu) {
        dataList.forEach(item => {
          item._disabled = false;
        });
        this.selectone = "";
      } else {
        dataList.forEach(item => {
          item._disabled = item.age != row.age;
        });
      }

      this.data1 = dataList;
    },
    rowClassName(row, index) {
      if (this.selectone && row.age !== this.selectone) {
        return "demo-table-info-row";
      }
      return "";
    }
  },
  created() {
    this.data1 = [
      {
        name: "John Brown",
        age: 18,
        address: "New York No. 1 Lake Park",
        date: "2016-10-03",
        isCheck: false,
        _disabled: false
      },
      {
        name: "Jim Green",
        age: 18,
        address: "London No. 1 Lake Park",
        date: "2016-10-01",
        isCheck: false,
        _disabled: false
      },
      {
        name: "Joe Black",
        age: 19,
        address: "Sydney No. 1 Lake Park",
        date: "2016-10-02",
        isCheck: false,
        _disabled: false
      },
      {
        name: "Jon Snow",
        age: 26,
        address: "Ottawa No. 2 Lake Park",
        date: "2016-10-04",
        isCheck: false,
        _disabled: false
      }
    ];
  }
};
</script>
<style>
.ivu-table .demo-table-info-row td {
  color: #dfe0e4;
}
</style>

最终的效果:iview table动态修改checked状态_第1张图片
ps:代码可以直接复制到iview Run执行

你可能感兴趣的:(iview)