fix: refresh vue custom layout after sort

common/changes/@visactor/vue-vtable/fix-issue-5150-vue-custom-layout-sort_2026-07-28-00-00.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: refresh vue custom layout dom content after sort",
+      "type": "patch",
+      "packageName": "@visactor/vue-vtable"
+    }
+  ],
+  "packageName": "@visactor/vue-vtable",
+  "email": "github@visactor.io"
+}

packages/vue-vtable/demo/src/App.vue

@@ -19,6 +19,7 @@ import ListTableEditorRender from './table/gramatical/composition/ListTable-edit
 import ListTableDes from './table/gramatical/composition/ListTable-destruction.vue';
 import ListTableCustom from './table/gramatical/composition/ListTable-custom.vue';
 import ListTableCustomHover from './table/gramatical/composition/ListTable-custom-hover.vue';
+import Issue5150CustomLayoutSort from './table/gramatical/composition/Issue5150CustomLayoutSort.vue';
 import ListTableVFor from './table/gramatical/options/ListTable-v-for.vue';
 
 import PivotTable from './table/gramatical/options/PivotTable.vue';
@@ -51,6 +52,7 @@ import singleRadio from './table/single/single-radio.vue';
   <!-- ---------- -->
 
   <ListTable />
+  <!-- <Issue5150CustomLayoutSort /> -->
   <!-- <ListTableEditor /> -->
   <!-- <ListTableEditorArco /> -->
   <!-- <ListTableEditorRender /> -->

packages/vue-vtable/demo/src/table/gramatical/composition/Issue5150CustomLayoutSort.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="toolbar">
+    <button @click="sortAsc">Sort score asc</button>
+    <span>Expected first name after sort: Bob</span>
+  </div>
+  <vue-list-table ref="tableRef" :options="tableOptions">
+    <ListColumn field="name" title="Name" width="220">
+      <template #customLayout="{ width, height, record }">
+        <Group :width="width" :height="height" :vue="{}">
+          <div class="name-cell" :data-record-id="record.id">
+            {{ record.name }} / score: {{ record.score }}
+          </div>
+        </Group>
+      </template>
+    </ListColumn>
+    <ListColumn field="score" title="Score" width="160" :sort="true" />
+  </vue-list-table>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Group, ListColumn } from '../../../../../src/components/index';
+import * as VTable from '../../../../../../vtable/src/index';
+
+const tableRef = ref();
+const records = [
+  { id: 1, name: 'Alice', score: 30 },
+  { id: 2, name: 'Bob', score: 10 },
+  { id: 3, name: 'Cindy', score: 20 }
+];
+
+const tableOptions = ref({
+  records,
+  defaultRowHeight: 44,
+  defaultHeaderRowHeight: 40,
+  theme: VTable.themes.DEFAULT,
+  customConfig: {
+    createReactContainer: true
+  }
+});
+
+function sortAsc() {
+  tableRef.value?.vTableInstance?.updateSortState({
+    field: 'score',
+    order: 'asc'
+  });
+}
+</script>
+
+<style scoped>
+.toolbar {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 8px;
+}
+
+.name-cell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  color: #1f2329;
+  background: #f7f8fa;
+}
+</style>

packages/vue-vtable/src/components/custom/vtable-vue-attribute-plugin.ts

@@ -158,10 +158,6 @@ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPl
         wrapContainer.setAttribute('data-vue-renderId', dataRenderId);
         // 先隐藏
         wrapContainer.style.display = 'none';
-        if (!reuse) {
-          // 仅在非复用时需要重新渲染
-          render(element, wrapContainer);
-        }
         targetMap = {
           wrapContainer,
           nativeContainer,
@@ -181,6 +177,7 @@ export class VTableVueAttributePlugin extends HtmlAttributePlugin implements IPl
       targetMap.renderId = this.renderId;
       targetMap.graphic = graphic;
       targetMap.lastAccessed = Date.now();
+      render(element, targetMap.wrapContainer);
       this.updateAccessQueue(id);
       this.updateStyleOfWrapContainer(graphic, stage, targetMap.wrapContainer, targetMap.nativeContainer);
     }