table插件中check框取消勾选bug?

Question

在使用table组件时.

   <Table :columns="columns" :data="data" size="small"
             style="margin-top: 30px" :height="436"
               @on-select="checkTable" @on-select-all="checkTable"></Table>

在勾选时会触发，返回的selection也确实是选中行数据。
但是在取消勾选时 selection 的内部数据没有同步更新，依旧是开始勾选的数据。

      checkTable(selection){
            this.selection=selection;
        },

这个问题很严重，求解决。如果勾选与取消的数据与selection不同步的话，那么这个selection就没什么意义了。

Answer 1

使用change.
解决之~

Answer 2

要用on-selection-change

Answer 3

可以设置tbody.objData中的每一项的_isChecked值为false，需要使用$refs去获取。

需要注意的是，iview的table是一个array-like Object，也就是一个类数组对象，需要使用for...in...或者Object.keys()获取到索引，这样才能可伸缩的去遍历。

例如下面的例子：

let selectionLeft = this.$refs.planingTable.$refs.selectionLeft.$refs.tbody.objData;
let selectionRight = this.$refs.planingTable.$refs.selectionRight.$refs.tbody.objData;

①for...in...方法获取index

for(let v in selectionLeft){
    selectionLeft[v]._isChecked = false;
}
for(let v in selectionRight){
    selectionRight[v]._isChecked = false;
}

②Object.keys()获取index

let selectionLeftArr = Object.keys(selectionLeft);
let selectionRightArr = Object.keys(selectionRight);
selectionLeftArr.forEach((e,i,arr)=>{
    selectionLeft[i]._isChecked = false;
})
selectionRightArr.forEach((e,i,arr)=>{
    selectionRight[i]._isChecked = false;
})

Answer 4

{

title: '选中',
align:'center',
key: 'checkBox',
render:(h,params)=>{
    return h('div',[
        h('Checkbox',{
            props:{
                value:params.row.checkBox
            },
            on:{
                'on-change':(e)=>{
                    console.log(e)
                    this.tableData.forEach((items)=>{      //先取消所有对象的勾选，checkBox设置为false
                        this.$set(items,'checkBox',false)
                    });
                    this.tableData[params.index].checkBox = e;  //再将勾选的对象的checkBox设置为true
                }
            }
        })
    ])
}

},

直接把复选框变成单选操作岂不是美滋滋