关于这个antd表格这一块的优化,已经持续了很多天了,着重把遇到的一些问题整理出来。
1、表格添加rowSelection这个属性之后遇到的一些bug
rowSelection添加后一般是配上删除实现一个多删的功能,但是实际测试下来后发现以下问题:
1、删除完之后,多删按钮的状态没有从disabled: false变为disabled:true
2、删除后,选中的标记仍然存在,没有清除,而且再次点击删除时,调用接口删除的仍然是上一次的id
export default {
data(){
return {
// 试品信息表格
sample_table_data: {
columns: [
{
title: "试品类型名",
dataIndex: "name",
key: "name",
},
{
title: "类型",
dataIndex: "type",
key: "type",
},
{
title: "操作",
dataIndex: "action",
key: "action",
scopedSlots: { customRender: "action" },
},
],
dataSource: [],
selected_dataSource: [],
btns: [
{
icon: "setting",
event: this.modifyHandleClick,
type: "primary",
label: "编辑",
},
],
isDelete: true,
rowSelection: {
onChange: (selectedRowKeys, selectedRows) => {
// 同步删除按钮是否可用
this.sample_table_data.selected_dataSource = selectedRows;
const isDelete = this.sample_table_data.selected_dataSource == 0;
this.sample_table_data.isDelete = isDelete;
},
},
// 分页参数
filterParams: {
current: 1,
pageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ["5", "10", "15", "20", "30", "50"],
showTotal: (total, range) => {
return `共${total}条`;
},
total: 0,
},
spinning: true,
},
}
}
}
我是用isDelete来记录了删除按钮是否可用的问题,因此当每次删除这个之后,这个table_data.selected_dataSource没有被清空,所以会导致以上的问题,删除按钮的状态没有被重置。因此解决办法也很简单
export default {
methods:{
// 删除
deleteClick(type) {
let that = this;
this.$confirm({
title: "提示",
content: "是否删除",
async onOk() {
if (type == "top") {
// 项目列表信息删除
let ids = that.sample_table_data.selected_dataSource.map(
(item) => item.id
);
console.log(ids);
try {
const res = await AxiosCfgSampleTypeDeleteForm(ids);
if (res.code == 200) {
that.getProjectTableInfo();
that.$message.success("删除成功");
// 清空表格前的选择框选中数据
that.sample_table_data.selected_dataSource = [];
// 手动重置删除框的状态
that.sample_table_data.isDelete = true;
}
} catch (error) {
console.log(error);
}
}
}
}
}
在我们调用接口时,手动的去操作,使得界面达到我们想要的效果。
但是与此同时,又出现了另一个问题,我发现当我全选第一页的全选按钮时,不仅第一页的被勾选上了,连带后面的几页也全部被勾选上了,但是当我在控制台去log的时候,发现打印出来的selected_dataSource只有第一页的数据,那么这就是一个问题了,经过排查以及查阅文献,发现原来是key的原因,因为没有加以识别的key,而在antd的官方文档上也提到了这一点:
而我在这里是封装了一个table的组件
<template>
<div class="ProjectTableComponent">
<a-table
:loading="table_data.spinning"
bordered
:rowKey="(record) => record.id || record.itemId"
:columns="table_data.columns"
:data-source="table_data.dataSource"
:row-selection="table_data.rowSelection"
:pagination="table_data.filterParams"
@change="filterParamsChange"
>
<template slot="action" slot-scope="text, record">
<a-space>
<div v-for="(item, index) in table_data.btns" :key="index">
<a-button
:icon="item.icon"
:type="item.type || 'primary'"
@click="item.event(text, record)"
>
{{ item.label }}
</a-button>
</div>
</a-space>
</template>
<template slot="projectIsShow" slot-scope="text, record">
<a-switch :checked="record.show == 1 ? true : false" disabled />
</template>
</a-table>
</div>
</template>
<script>
export default {
props: {
table_data: {
type: Object,
default: () => ({}),
},
},
methods: {
filterParamsChange(pagination) {
this.$emit("onHandleClickChange", pagination);
},
},
};
</script>
<style lang="less" scoped>
.ProjectTableComponent {
height: 100%;
}
</style>
加上 rowKey这个属性,接受一个回调函数,参数是当前这一条数据,这个key要注意是每条数据唯一的,用以区分数据以渲染表格,我这里由于某些表格的数据字段不一样,因此加上了多个判断条件,这个问题也解决了。