x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.64k stars 1.06k forks source link

使用reloadColumn加载列配置时,如果配置了拖动列宽localStorage保存,会导致reloadColumn无法修改列顺序 #2618

Open q3156277562 opened 2 weeks ago

q3156277562 commented 2 weeks ago

可复现的链接(包含复现链接与示例代码):

### 问题描述与截图: 使用reloadColumn加载列配置时,如果配置了拖动列宽保存,会导致reloadColumn无法修改列顺序。如示例代码,我使用reverse反转列时如果开启 :custom-config="{ storage: { resizable: true, }, }"这个配置会导致无法将列反转 ### 期望的结果: reloadColumn能正常修改列顺序 ### 操作系统: window11 ### 浏览器版本: 最新Chrome ### vue 版本: 3.3.29 ### vxe-pc-ui 版本: 4.2.34 ### vxe-table 版本: 4.7.97 ### 是否使用当前最新版本? - [X] 我已确认是使用当前的最新版本并已按要求提供复现链接与示例代码。
q3156277562 commented 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

xlz26296 commented 2 weeks ago

可以调用 resetColumn(true) 重置自定义数据

q3156277562 commented 2 weeks ago

可以调用 resetColumn(true) 重置自定义数据

但是调用这个会导致列宽保存失效