解决vue-iview的table组件，带有checkbox选择框勾选的问题

近期做的项目用到了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>