Open q3156277562 opened 2 weeks ago
<template>
<div>
<vxe-table
ref="tableRef"
:data="tableData"
:cell-style="cellStyle"
id="hdisubfdsbf"
border
:column-config="{ resizable: true }"
:custom-config="{
storage: {
resizable: true,
},
}"
>
<vxe-column type="seq" width="70" />
<vxe-column field="name" title="Name" />
<vxe-column field="sex" title="Sex" />
<vxe-column field="age" title="Age" />
</vxe-table>
<button @click="rever">反转</button>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
interface RowVO {
id: number;
name: string;
role: string;
sex: string;
age: number;
address: string;
}
const cloumn = ref([]);
const tableRef = ref();
const cellStyle = (vals) => {
// console.log(vals);
};
const rever = () => {
const cloumnData = cloumn.value.fullColumn.reverse();
tableRef.value.reloadColumn(cloumnData);
};
const tableData = ref<RowVO[]>([
{
id: 10001,
name: "Test1",
role: "Develop",
sex: "Man",
age: 28,
address: "test abc",
},
{
id: 10002,
name: "Test2",
role: "Test",
sex: "Women",
age: 22,
address: "Guangzhou",
},
{
id: 10003,
name: "Test3",
role: "PM",
sex: "Man",
age: 32,
address: "Shanghai",
},
{
id: 10004,
name: "Test4",
role: "Designer",
sex: "Women",
age: 24,
address: "Shanghai",
},
]);
onMounted(() => {
nextTick(() => {
cloumn.value = tableRef.value.getTableColumn();
});
});
</script>
没有外链,贴一个简易demo
可以调用 resetColumn(true) 重置自定义数据
可以调用 resetColumn(true) 重置自定义数据
但是调用这个会导致列宽保存失效
可复现的链接(包含复现链接与示例代码):