antd行点击选中/取消选中
项目使用的是ant-design-vue@2.x,最近测试提了一个优化建议:行点击选中当前记录。接下来记录一下实现:行点击事件的要点就是自定义行属性(customRow),我们可以两步搞定这个需求(行点击选中/取消选中)。第一步,定义customLine方法:import { reactive,} from "vue";setup() {const formData = reactive({tab
·
项目使用的是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,
};
}
第二步,在<a-table>标签中设置:
<a-table
rowKey="id"
:columns="columns"
:pagination="false"
:loading="loading"
:data-source="formData.tableData"
:custom-row="customLine"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
>
</a-table>
补充: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),
};
}
更多推荐
已为社区贡献2条内容
所有评论(0)