项目名称：国信现券业务
KOCA版本 ：“szkingdom.yf.koca-template”: “3.7.5-2”,
“szkingdom.yf.koca-ui”: “3.7.4”,
“@szkingdom.koca/micro”: “1.0.2-17”,
“@szkingdom.yf.koca-ui/kace-ui”: “3.1.0-44”,
KOCA模块 ：大数据表格
场景 ：
问题 ：vue2中大数据表格中，勾选项被删除后，重新获取勾选，仍然能获取到被删的数据，并且展开的情况下删除父级时子级并不会联动删除。
报错细节 ：
尝试解决方案：展开情况下删除时遍历子级删除。
<!-- 基本信息 -->
<template>
<ui-com-container>
<ui-com-page
ref="plTreeTable"
:columns="columns"
:border="false"
:row-height="rowHeight"
:table-tag-config="{ tableTag: 'u-table', columnTag: 'u-table-column' }"
:tree-config="{
children: 'children',
iconClose: 'el-icon-folder-add',
iconOpen: 'el-icon-folder-remove',
expandAll: false,
}"
use-virtual
row-id="id"
row-key="id"
>
<div slot="toolbarLeft">
<kui-button @click="getCheckboxRecords()">获取选中的行 </kui-button>
<kui-button @click="deleteCheckboxRecords()">删除选中 </kui-button>
</div>
</ui-com-page>
</ui-com-container>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component({
name: 'baseInfo',
})
export default class BaseInfo extends Vue {
treeData = [];
rowHeight = 26;
// 获取复选框选中的行
getCheckboxRecords() {
const checkData = (this.$refs as any).plTreeTable.getKuiTableEl().getCheckboxRecords();
alert('勾选了' + checkData.length + '条数据');
}
// 删除复选框选中的行
deleteCheckboxRecords() {
const data = this.$refs.plTreeTable.getKuiTableEl().getUTreeData();
const checkData = (this.$refs as any).plTreeTable.getKuiTableEl().getCheckboxRecords();
for (let i = data.length - 1; i >= 0; i--) {
const element = data[i];
checkData.map((y) => {
if (element.id === y.id) {
data.splice(i, 1);
}
});
}
}
columns = [
{
type: 'selection',
headerAlign: 'center',
align: 'center',
},
{
prop: 'address',
treeNode: true,
fixed: 'left',
id: 0,
label: '地址0',
width: 200,
},
{
prop: 'address',
id: 1,
label: '地址1',
fixed: 'left',
width: 200,
},
{
prop: 'address',
id: 2,
label: '地址2',
width: 200,
},
{
prop: 'address',
id: 4,
label: '地址4',
width: 200,
},
{
prop: 'address',
id: 5,
label: '地址5',
width: 200,
},
{
prop: 'address',
id: 6,
label: '地址6',
width: 200,
},
{
prop: 'address',
id: 7,
label: '地址7',
width: 200,
},
{
prop: 'address',
id: 8,
label: '地址8',
width: 200,
},
{
prop: 'address',
id: 9,
label: '地址9',
width: 200,
},
];
mounted() {
const data = Array.from({ length: 20 }, (_, idx) => ({
id: idx + '_' + 1,
date: '2016-05-03',
name: 1,
ab: '欢迎使用u-table',
isCheck: false,
address: idx,
children: Array.from({ length: 20 }, (_, idx2) => ({
id: idx + '_' + idx2 + '_' + 1,
date: '2016-05-03',
isCheck: false,
name: 1,
ab: '欢迎使用u-table',
address: idx + '_' + idx2,
})),
}));
this.treeData = data; // 知道为啥treeData不在 data()方法里面定义吗？嘻嘻
(this.$refs as any).plTreeTable.setData(data);
}
}
</script>
<style lang="scss" scoped>
/deep/.el-table__body tbody .el-table__row > td {
padding: 0;
.cell.el-tooltip {
padding: 0 !important;
}
border-color: #ffffff;
}
</style>