点击行时默认设置单选或多选状态
场景描述
表格组件的设置了单选或多选后,默认是点击单选或者多选框才可以是选中状态,点击行的时候不会设置单选或多选状态,需要在点击行的也设置单选或多选状态
实现思路
在表格组件的行点击事件中代码控制
具体实现
1.单选的控制
onTable0RowClick = ({event,record,index}) => {
var mainData = this.comp("mainData"); //获取表格组件绑定的数据集
var selectData = this.comp("selectData");//获取表格组件选中数据集设置的数据集
var idColumn = selectData.getIdColumn();//获取选中数据集的idColumn
var rowId = record[idColumn];//从record参数中获取idColumn列的值
selectData.clear();//清除选中数据集的数据
mainData.copyRows(rowId,"selectData");//把表格组件绑定的数据集中当前点击行的数据复制到选中数据集上,即设置为选中状态
}
2.多选的控制
onTable0RowClick = ({event,record,index}) => {
var mainData = this.comp("mainData");//获取表格组件绑定的数据集
var selectData = this.comp("selectData");//获取表格组件选中数据集设置的数据集
var selectedRowKeys = selectData.getIDs();//获取当前选中的数据
var idColumn = selectData.getIdColumn();//获取选中数据集的idColumn
var rowId = record[idColumn];//从record参数中获取idColumn列的值
if(selectedRowKeys.indexOf(rowId) > -1){//判断当前点击的行是否是选中状态,选中状态取消选中,未选中设置为选中
selectData.removeData(rowId);//取消选中
}
else
mainData.copyRows(rowId,"selectData");//设置为选中
}