项目名称：国信现券业务
KOCA版本 ："@szkingdom.koca/micro": “1.0.2-17”,
“@szkingdom.yf.koca-ui/kace-ui”: “3.1.0-44”,
“szkingdom.yf.koca-template”: “3.7.5-2”,
“szkingdom.yf.koca-ui”: “3.7.4”,
场景 ：展开明细
问题 ：表格修改数据后，如果使用了全部展开或全部收齐的方法后，数据会重置为默认数据，修改的数据将被清除掉。
<!-- 大数据表格全部展开收起优化demo -->
<template>
<ui-com-container>
<ui-com-page
ref="resultQuery"
:columns="columns"
use-virtual
row-id="id"
row-key="id"
: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,
}"
@toggle-tree-expand="toggleTreeExpand"
@select="tableSelectChange"
@select-all="allTableSelectChange"
>
<section slot="toolbarLeft">
<kui-button :type="null" @click="setAllTreeExpansion">全部展开</kui-button>
<kui-button :type="null" @click="clearTreeExpand">全部收起</kui-button>
<kui-button :type="null" @click="allIsCheck">获取勾选</kui-button>
</section>
</ui-com-page>
</ui-com-container>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { intersectionBy, cloneDeep, uniqBy } from 'lodash-es';
@Component({
name: 'PositionForm',
components: {},
})
export default class PositionForm extends Vue {
tableData = [];
treeData = [];
// columns = Array.from({ length: 10 }, (_, idx) => ({
// prop: 'address',
// id: idx,
// label: '地址' + idx,
// width: 200,
// }));
columns = [
{ type: 'selection', width: 50, headerAlign: 'center', align: 'center' },
{
prop: 'address',
id: 0,
label: '地址0',
width: 200,
'tree-node': true,
fixed: 'left',
},
{
prop: 'address',
id: 1,
label: '地址1',
width: 200,
fixed: 'left',
render: (h, { row }) => {
return h(
'kui-input',
{
style: { width: '100%' },
props: {
value: row.address,
},
on: {
input: (val) => {
row.address = val;
},
},
},
row.address
);
},
},
{
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,
},
];
flattenData(data) {
let flattenedData = [];
data.forEach((item) => {
const { children } = item;
const newItem = cloneDeep(item);
delete newItem.children;
flattenedData.push(newItem);
if (children && children.length > 0) {
const childrenData = this.flattenData(children);
flattenedData = flattenedData.concat(childrenData);
}
});
return flattenedData;
}
// 获取选中
allIsCheck() {
console.time('获取数据');
const parentData = (this.$refs as any).resultQuery
.getKuiTableEl()
.getUTreeData()
.filter((item) => item.children !== undefined);
const isCheckParentData = parentData.filter((item) => item.isCheck === true);
const isCheckChildren = [];
parentData.map((x) => {
x.children.map((y) => {
if (y.isCheck) {
isCheckChildren.push(y);
}
});
});
console.log(isCheckParentData, isCheckChildren);
console.timeEnd('获取数据');
}
// 展开全部
setAllTreeExpansion() {
console.time('展开所有');
const oldTableData = (this.$refs as any).resultQuery.getKuiTableEl().getUTreeData();
const flatTableData = uniqBy(this.flattenData(oldTableData), 'id');
(this.$refs.resultQuery as any).getKuiTableEl().setAllTreeExpansion();
const newTableData = (this.$refs as any).resultQuery.getKuiTableEl().getUTreeData();
for (let i = 0; i < flatTableData.length; i++) {
newTableData[i].isCheck = flatTableData[i].isCheck;
newTableData[i].isExpand = true;
}
(this.$refs as any).resultQuery.getKuiTableEl().partRowSelections(
newTableData.filter((item) => item.isCheck === true),
true
);
console.timeEnd('展开所有');
}
// 关闭所有
clearTreeExpand() {
console.time('关闭所有');
const oldTableData = (this.$refs as any).resultQuery
.getKuiTableEl()
.getUTreeData()
.filter((item) => item.children !== undefined);
(this.$refs as any).resultQuery.getKuiTableEl().clearTreeExpand();
const newTableData = (this.$refs as any).resultQuery.getKuiTableEl().getUTreeData();
for (let i = 0; i < oldTableData.length; i++) {
newTableData[i].isExpand = false;
newTableData[i].isCheck = oldTableData[i].isCheck;
for (let j = 0; j < oldTableData[i].children.length; j++) {
const element = oldTableData[i].children[j];
newTableData[i].children[j].isExpand = false;
newTableData[i].children[j].isCheck = element.isCheck;
}
}
(this.$refs as any).resultQuery.getKuiTableEl().partRowSelections(
newTableData.filter((item) => item.isCheck === true),
true
);
console.timeEnd('关闭所有');
}
// 收起展开时监听
toggleTreeExpand(row, treeExpanded, event) {
console.time('展开与收起');
if (row.pl_table_expand === true) {
if (row.isCheck) {
(this.$refs as any).resultQuery
.getKuiTableEl()
.partRowSelections(row.children, row.isCheck);
} else {
(this.$refs as any).resultQuery.getKuiTableEl().partRowSelections(
row.children.filter((item) => item.isCheck === true),
true
);
}
}
console.timeEnd('展开与收起');
}
// 勾选监听
tableSelectChange(selection, row) {
if (row.pl_table_level === 0) {
// 父级
row.isCheck = !row.isCheck;
row.children.map((x) => {
x.isCheck = row.isCheck;
return x;
});
(this.$refs as any).resultQuery.getKuiTableEl().partRowSelections(row.children, row.isCheck);
} else {
// 子级
const tableParentData = (this.$refs as any).resultQuery
.getKuiTableEl()
.getUTreeData()
.filter((item) => item.id === row.parentId);
row.isCheck = !row.isCheck;
if (tableParentData[0].children.every((x) => x.isCheck === true)) {
tableParentData[0].isCheck = row.isCheck;
(this.$refs as any).resultQuery
.getKuiTableEl()
.partRowSelections(tableParentData, row.isCheck);
} else {
tableParentData[0].isCheck = false;
(this.$refs as any).resultQuery.getKuiTableEl().partRowSelections(tableParentData, false);
}
}
}
// 全部勾选监听
allTableSelectChange(selection) {
const tableParentData = (this.$refs as any).resultQuery
.getKuiTableEl()
.getUTreeData()
.filter((item) => item.children !== undefined);
// 判断是全选还是全不选
if (selection.length === 0) {
// 全不选状态下勾选状态全为false
tableParentData.map((x) => {
x.isCheck = false;
if (x.children !== undefined) {
x.children.map((y) => {
y.isCheck = false;
return y;
});
}
return x;
});
} else {
tableParentData.map((x) => {
x.isCheck = true;
if (x.children !== undefined) {
x.children.map((y) => {
y.isCheck = true;
return y;
});
}
return x;
});
}
}
mounted() {
const data = Array.from({ length: 10 }, (_, idx) => ({
id: idx + '_' + 1,
date: '2016-05-03',
isCheck: false,
isExpand: false,
address: idx,
children: Array.from({ length: 10 }, (_, idx2) => ({
id: idx + '_' + idx2 + '_' + 1,
parentId: idx + '_' + 1,
date: '2016-05-03',
isCheck: false,
isExpand: false,
address: idx + '_' + idx2,
})),
}));
this.treeData = data; // 知道为啥treeData不在 data()方法里面定义吗？嘻嘻
// 设置表格数据
(this.$refs as any).resultQuery.getKuiTableEl().reloadData(data);
// (this.$refs as any).resultQuery.setData(data);
}
}
</script>
<style lang="scss" scoped></style>