项目使用的是ant-design-vue@2.x,最近测试提了一个优化建议:行点击选中当前记录。接下来记录一下实现:
行点击事件的要点就是自定义行属性(customRow),我们可以两步搞定这个需求(行点击选中/取消选中)。
第一步,定义customLine方法:
import { reactive,} from "vue";
setup() {
const formData = reactive({
tableData: [], // 表格数据
selectedIds: [], // 选中记录的ids
selectedItems: [], // 选中的记录
});
// 自定义行属性
const customLine = (record) => {
return {
// 行点击选中/取消选中
onClick: () => {
if (formData.selectedIds && formData.selectedIds.length > 0) {
let index = -1;
for (let i = 0; i < formData.selectedIds.length; i++) {
if (formData.selectedIds[i] === record.id) {
index = i;
}
}
// 如果当前记录未选中,则选中
if (index === -1) {
dataState.selectedRowKeys.push(record.id);
formData.selectedItems.push(record);
formData.selectedIds.push(record.id);
} else {
// 否则取消选中
formData.selectedIds.splice(index, 1);
let keyIndex = dataState.selectedRowKeys.findIndex(item => item === record.id);
dataState.selectedRowKeys.splice(keyIndex, 1);
let itemIndex = formData.selectedItems.findIndex(item => item.id === record.id);
formData.selectedItems.splice(itemIndex, 1);
}
} else {
// 当前选中记录为空,直接选中
dataState.selectedRowKeys.push(record.id);
formData.selectedItems.push(record);
formData.selectedIds.push(record.id);
}
}
};
};
return {
formData,
customLine,
};
}
第二步,在标签中设置:
补充:row-selection是已有的点击复选框选中的配置
import { toRefs, reactive,} from "vue";
setup() {
const dataState = reactive({
selectedRowKeys: [],
});
const onSelectChange = (selectedRowKeys, selectedRows) => {
dataState.selectedRowKeys = selectedRowKeys;
formData.selectedIds.length = 0;
formData.selectedItems.length = 0;
if (selectedRows.length > 0) {
editBtn.value = false;
} else {
editBtn.value = true;
}
selectedRows.forEach((item) => {
formData.selectedItems.push(item);
formData.selectedIds.push(item.id);
});
};
return {
...toRefs(dataState),
};
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)