fix table 前台分页重复刷新卡死问题

This commit is contained in:
Theluyuan 2023-06-28 16:24:48 +08:00
parent d9127dfd42
commit d2f4a1b2be
9 changed files with 190 additions and 138 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -47,7 +47,16 @@ const emit = defineEmits([
"update:selectedKeys",
"update:selectedKey",
]);
function toThousands(num: number | string) {
if(typeof num == "string"){
num = parseFloat(num || '0')
}
let xs = num.toString().split(".")[1]
let zs = num.toString().split(".")[0]
let jg = (zs || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + (xs ? "." + xs : "");
console.log(jg)
return jg;
}
const props = withDefaults(defineProps<TableRowProps>(), {
checkbox: false,
childrenColumnName: "children",
@ -606,12 +615,13 @@ const radioProps = props.getRadioProps(props.data, props.index);
:content="data[column.key]"
:isAutoShow="true"
>
{{ data[column.key] }}
{{ column.qfw ? toThousands(data[column.key]) : data[column.key] }}
</lay-tooltip>
<template v-else>
<template v-if="column.edit">
<span v-if="!editIndex[columnIndex]">
{{ data[column.key] }}
{{ column.qfw ? toThousands(data[column.key]) : data[column.key] }}
</span>
<lay-input
:autofocus="true"
@ -621,7 +631,7 @@ const radioProps = props.getRadioProps(props.data, props.index);
@blur="editIndex[columnIndex] = false"
></lay-input>
</template>
<span v-else> {{ data[column.key] }} </span>
<span v-else> {{ column.qfw ? toThousands(data[column.key]) : data[column.key] }} </span>
</template>
</div>
</td>

View File

@ -99,6 +99,7 @@ const tableRef = ref();
const datalist = ref([...props.dataSource]);
console.log(datalist.value, 97);
console.log("表格初始化", 97);
const s = "";
const allChecked = ref(false);
const hasChecked = ref(false);
@ -272,6 +273,7 @@ const tableSelectedKey: WritableComputedRef<string> = computed({
watch(
() => props.dataSource,
() => {
console.log("table数据更新")
tableDataSource.value = [...props.dataSource];
// if(!props.page){
// datalist.value = [...props.dataSource]
@ -344,18 +346,13 @@ watch(tableDataSource, () => {
tmp.total = tableDataSource.value.length;
emit("update:page", tmp);
// tableDataSource.value = endlist
sxlist.value = []
change({
limit: props.page.limit,
current: pagecurrent || props.page.current,
current: pagecurrent || props.page.current
});
}
});
watch(
() => props.page,
() => {
console.log(props.page, 342);
}
);
let pagecurrent: number;
const change = function (page: any) {
if (props.serverpage) {
@ -762,7 +759,7 @@ const soultop = ref(0);
const soulleft = ref(0);
const selcolumn = ref<any>({});
const soulkey = ref("");
const sxlist: any = ref({});
const sxlist: any = ref([]);
function showsoul(event: MouseEvent, column: any, key: string) {
console.log(event);
soulleft.value = event.pageX;
@ -786,10 +783,17 @@ function desc(event: any) {
function sx(e: any) {
sxlist.value[e.key] = e.list;
}
watch(sxlist,()=>{
console.log("sxlist更新")
})
watch(
sxlist,
() => {
[sxlist,()=>props.dataSource],
(old,new1) => {
// tableDataSource
// console.log(JSON.stringify(sxlist.value),JSON.stringify(props.dataSource),old[0] == new1[0],old[1] == new1[1])
if(sxlist.value.length == 0){
return
}
let list: any = [...props.dataSource];
let endlist: any = [];
for (let i in sxlist.value) {
@ -806,19 +810,20 @@ watch(
endlist.push(i);
}
}
if (!props.page) {
datalist.value = endlist;
if (!props.page || props.serverpage) {
nextTick(()=>{
datalist.value = endlist;
})
} else {
tableDataSource.value = endlist;
change({
limit: props.page.limit,
current: pagecurrent || props.page.current,
isReload: true
});
}
console.log("筛选", endlist);
},
{
deep: true,
},{
deep: true
}
);
window.addEventListener("click", heddin);

View File

@ -169,4 +169,5 @@ function shubiao(event: any) {
selshow.value = false;
}
}
</script>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long