修复自定义列 html 类型渲染问题

x-extends · Aug 26, 2024 · aa92531 · aa92531
1 parent 5f05994
commit aa92531
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 20 deletions.
diff --git a/examples/views/table/TableTest2.vue b/examples/views/table/TableTest2.vue
@@ -10,6 +10,8 @@
       height="400"
       ref="tableRef"
       id="bbbbb"
+      :row-config="{useKey: true}"
+      :column-config="{useKey: true}"
       :custom-config="{storage:true}"
       :loading="demo1.loading"
       :import-config="{modes: importModes}"
@@ -27,6 +29,8 @@
         </vxe-column>
         <vxe-column field="name" title="Name" sortable></vxe-column>
       </vxe-colgroup>
+      <vxe-column field="sex11" title="<span style='color:red;'>Sex222</span>" type="html"></vxe-column>
+      <vxe-column field="sex22" title="<span style='color:red;'>Sex1111</span>" type="html" :visible="false"></vxe-column>
       <vxe-column field="name1" title="Name1" sortable></vxe-column>
       <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
       <vxe-column

diff --git a/examples/views/table/TableTest3.vue b/examples/views/table/TableTest3.vue
@@ -10,6 +10,8 @@
       height="400"
       ref="tableRef"
       id="aaaa"
+      :row-config="{useKey: true}"
+      :column-config="{useKey: true}"
       :print-config="{}"
       :import-config="{}"
       :export-config="{}"
@@ -28,7 +30,8 @@
         </vxe-column>
         <vxe-column field="name" title="Name" sortable></vxe-column>
       </vxe-colgroup>
-      <vxe-column field="sex11" title="Sex11" :visible="false"></vxe-column>
+      <vxe-column field="sex11" title="<span style='color:red;'>Sex222</span>" type="html"></vxe-column>
+      <vxe-column field="sex22" title="<span style='color:red;'>Sex1111</span>" type="html" :visible="false"></vxe-column>
       <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
       <vxe-column
         field="age"

diff --git a/examples/views/table/TableTest4.vue b/examples/views/table/TableTest4.vue
@@ -10,6 +10,8 @@
       height="400"
       ref="tableRef"
       id="aaaa"
+      :row-config="{useKey: true}"
+      :column-config="{useKey: true}"
       :print-config="{}"
       :import-config="{}"
       :export-config="{}"
@@ -28,7 +30,8 @@
         </vxe-column>
         <vxe-column field="name" title="Name" sortable></vxe-column>
       </vxe-colgroup>
-      <vxe-column field="sex11" title="Sex11" :visible="false"></vxe-column>
+      <vxe-column field="sex11" title="<span style='color:red;'>Sex222</span>" type="html"></vxe-column>
+      <vxe-column field="sex22" title="<span style='color:red;'>Sex1111</span>" type="html" :visible="false"></vxe-column>
       <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
       <vxe-column
         field="age"

diff --git a/packages/table/module/custom/panel.ts b/packages/table/module/custom/panel.ts
@@ -35,7 +35,7 @@ export default defineComponent({
     const bodyElemRef = ref() as Ref<HTMLDivElement>
     const dragHintElemRef = ref() as Ref<HTMLDivElement>
 
-    const dragColumn = ref<VxeTableDefines.ColumnInfo | null>()
+    const dragColumnRef = ref<VxeTableDefines.ColumnInfo | null>()
 
     let prevDropTrEl: any
 
@@ -208,7 +208,7 @@ export default defineComponent({
       const colid = trEl.getAttribute('colid')
       const column = $xeTable.getColumnById(colid)
       trEl.draggable = true
-      dragColumn.value = column
+      dragColumnRef.value = column
       addClass(trEl, 'active--drag-origin')
     }
 
@@ -218,7 +218,7 @@ export default defineComponent({
       const trEl = tdEl.parentNode as HTMLElement
       const dragHintEl = dragHintElemRef.value
       trEl.draggable = false
-      dragColumn.value = null
+      dragColumnRef.value = null
       removeClass(trEl, 'active--drag-origin')
       if (dragHintEl) {
         dragHintEl.style.display = ''
@@ -261,7 +261,7 @@ export default defineComponent({
         prevDropTrEl.removeAttribute('drag-pos')
         removeClass(prevDropTrEl, 'active--drag-target')
       }
-      dragColumn.value = null
+      dragColumnRef.value = null
       trEl.draggable = false
       trEl.removeAttribute('drag-pos')
       if (dragHintEl) {
@@ -373,10 +373,16 @@ export default defineComponent({
                   ])
                 ])
                 : createCommentVNode(),
-              h('div', {
-                class: 'vxe-table-custom--checkbox-label',
-                title: colTitle
-              }, colTitle),
+              column.type === 'html'
+                ? h('div', {
+                  key: '1',
+                  class: 'vxe-table-custom--checkbox-label',
+                  innerHTML: colTitle
+                })
+                : h('div', {
+                  key: '0',
+                  class: 'vxe-table-custom--checkbox-label'
+                }, colTitle),
               !parent && allowFixed
                 ? h('div', {
                   class: 'vxe-table-custom--fixed-option'
@@ -409,6 +415,7 @@ export default defineComponent({
       })
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
+      const dragColumn = dragColumnRef.value
       return h('div', {
         ref: refElem,
         key: 'simple',
@@ -464,7 +471,7 @@ export default defineComponent({
               h('div', {
                 ref: dragHintElemRef,
                 class: 'vxe-table-custom-popup--drag-hint'
-              }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+              }, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))
             ]),
             customOpts.showFooter
               ? h('div', {
@@ -565,10 +572,17 @@ export default defineComponent({
               h('td', {
                 class: 'vxe-table-custom-popup--column-item col--name'
               }, [
-                h('div', {
-                  class: 'vxe-table-custom-popup--name',
-                  title: colTitle
-                }, colTitle)
+                column.type === 'html'
+                  ? h('div', {
+                    key: '1',
+                    class: 'vxe-table-custom-popup--name',
+                    innerHTML: colTitle
+                  })
+                  : h('div', {
+                    key: '0',
+                    class: 'vxe-table-custom-popup--name',
+                    title: colTitle
+                  }, colTitle)
               ]),
               allowResizable
                 ? h('td', {
@@ -623,6 +637,7 @@ export default defineComponent({
       })
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
+      const dragColumn = dragColumnRef.value
       const scopedSlots = {
         default: () => {
           return h('div', {
@@ -730,7 +745,7 @@ export default defineComponent({
             h('div', {
               ref: dragHintElemRef,
               class: 'vxe-table-custom-popup--drag-hint'
-            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))
           ])
         },
         footer: () => {

diff --git a/packages/table/module/export/export-panel.ts b/packages/table/module/export/export-panel.ts
@@ -171,15 +171,17 @@ export default defineComponent({
         const isColGroup = column.children && column.children.length
         const isChecked = column.checked
         const indeterminate = column.halfChecked
+        const isHtml = column.type === 'html'
         cols.push(
           h('li', {
+            key: column.id,
             class: ['vxe-export--panel-column-option', `level--${column.level}`, {
               'is--group': isColGroup,
               'is--checked': isChecked,
               'is--indeterminate': indeterminate,
               'is--disabled': column.disabled
             }],
-            title: colTitle,
+            title: isHtml ? '' : colTitle,
             onClick: () => {
               if (!column.disabled) {
                 changeOption(column)
@@ -189,9 +191,16 @@ export default defineComponent({
             h('span', {
               class: ['vxe-checkbox--icon', indeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
             }),
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, colTitle)
+            isHtml
+              ? h('span', {
+                key: '1',
+                class: 'vxe-checkbox--label',
+                innerHTML: colTitle
+              })
+              : h('span', {
+                key: '0',
+                class: 'vxe-checkbox--label'
+              }, colTitle)
           ])
         )
       })