关于前端:解决vueiview的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>