近期做的我的项目用到了iview的table组件，并且带有checkbox抉择框。

iview坑：
（1）给data设置_check的属性。 _checked属性会影响checkbox的选中状态。然而checkbox的选中状态不会影响_check 属性
（2）iview 官网文档说：
@on-selection-change，只有选中项发生变化时就会触发，返回值为 selection，已选项。

实现成果并不是这样的，而是：
用程序设置_checked=true后，并不会触发该事件。也不会触发on-select-cancel 和on-select。只有通过鼠标再次点击checkbox，才会触发上述三项事件。尽管最初参数中的selection是正确的。

用程序切换某一行的选中状态，须要调用函数this.$refs.xxx.toggleSelect(i)，调用该函数后，会触发on-select-cancel 、on-select、on-selection-change事件。

解决方案：
依据selection,拆分已选项与未选项

<template>  <div>    <Table      border       ref="selection"       :columns="columns4" :data="data1"       @on-selection-change="handleOnSelectionChange"    ></Table>    <Button @click="handleSelectAll(true)">Set all selected</Button>    <Button @click="handleSelectAll(false)">Cancel all selected</Button>  </div></template><script>const _ = window._export default {  data() {    return {      columns4: [        {          type: 'selection',          width: 60,          align: 'center'        },        {          title: 'Name',          key: 'name'        },        {          title: 'Age',          key: 'age'        },        {          title: 'Address',          key: 'address'        },        {          title: 'Action',          key: 'action',          width: 150,          align: 'center',          render: (h, params) => {            const { row } = params            return (              <div>                <div>                  <p>{String(row._checked)}</p>                </div>              </div>            )          }        }      ],      data1: [        {          id: 1,          name: 'John Brown',          age: 18,          address: 'New York No. 1 Lake Park',          date: '2016-10-03',          _checked: false        },        {          id: 2,          name: 'Jim Green',          age: 24,          address: 'London No. 1 Lake Park',          date: '2016-10-01',          _checked: false        },        {          id: 3,          name: 'Joe Black',          age: 30,          address: 'Sydney No. 1 Lake Park',          date: '2016-10-02',          _checked: false        },        {          id: 4,          name: 'Jon Snow',          age: 26,          address: 'Ottawa No. 2 Lake Park',          date: '2016-10-04',          _checked: false        }      ]    }  },  methods: {    handleSelectAll(status) {      this.$refs.selection.selectAll(status)    },    handleOnSelectionChange (selection) {      // 思路：将选中的与未选中的做分组      const _data = JSON.parse(JSON.stringify(this.data1))      // 已选项      const selectedArrs = selection      // 未选项      const unSelectArrs = _data.filter(item => _.findIndex(selectedArrs, {id: item.id}) > -1 ? false: true)      this._handleToggleChecked(selectedArrs, true)      this._handleToggleChecked(unSelectArrs, false)    },    // 单选与未单选    _handleToggleChecked (arrs, boo) {      const self = this      arrs.map(item => {        const _index = _.findIndex(self.data1, {'id': item.id})        item._checked = boo        self.data1.splice(_index, 1, item)      })    }  }}</script><style lang="less"></style>