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

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

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>