element-ui el-table 使用toggleRowSelection点击一行来控制复选框

点击一行控制复选框

el-table

在table的一行上点击执行@row-click,使用toggleRowSelection(row,true)控制复选框“选择”，之后（不同时）执行@selection-change记录下那些行的复选框被选中了（之后可用来执行其他针对复选框的操作）.但再次点击行时首先判断是否为已选择项，即判断@selection-change中的multipleSelection 是否有该行，有则toggleRowSelection(row,false)取消选择否则toggleRowSelection(row,true)选择

export default {
	data() {
		return {
			multipleSelection:[]
		}
}

<el-table ref="multipleTable" :data="appList" @selection-change="changeFun">
  <el-table-column type="selection" width="55" class="selection" prop='uuid' :selectable='checkboxInit' @selection-change="handleSelectionChange" @row-click="handleRowClick"></el-table-column>
  <el-table-column label="">
    <template scope="scope"></template>
  </el-table-column>
  <el-table-column prop="username" label="username"></el-table-column>
  <el-table-column prop="createTime" label="创建时间"></el-table-column>
</el-table>

感谢¹

handleSelectionChange(val) {
            this.multipleSelection = val;
        },
handleRowClick(row) {
            let self=this;
            let findResult = self.multipleSelection.findIndex((value,index)=>{
                return value==row;
            })
            if(findResult!=-1){
                //self.$refs.multipleTable.$children[0].toggleRowSelection(row,false);
              	self.$refs.multipleTable.toggleRowSelection(row,false);
            }else {
                //self.$refs.multipleTable.$children[0].toggleRowSelection(row,true);
                self.$refs.multipleTable.toggleRowSelection(row,true);
            }
        }

---

1. https://blog.csdn.net/gongyi199393/article/details/80902845 ↩︎