【fix 66426】JTable修复拖拽问题

jero-web/src/components/jero/JTable.vue

@@ -210,15 +210,18 @@ export default {
       // 更新父组件的数据，将排序后的进行渲染
       this.$emit('update:columns', columns)
       // 按冻结顺序排序
-      this.resultColumns = [...startArr.sort((a, b) => {
-        const freezeArr = this.settingColumnsObj.freeze
-        return freezeArr.indexOf(getKey(a)) - freezeArr.indexOf(getKey(b))
-      }), ...midArr, ...endArr]
+      this.resultColumns = [
+        ...startArr.sort((a, b) => {
+          const freezeArr = this.settingColumnsObj.freeze
+          return freezeArr.indexOf(getKey(a)) - freezeArr.indexOf(getKey(b))
+        }),
+        ...midArr,
+        ...endArr
+      ]
       return this.resultColumns
     },
     // 初始化表格拖拽
     initDrag (columns) {
-      columns = cloneDeep(columns)
       // 没有边框就不能拖拽
       if (!this.bordered) {
         return
@@ -230,7 +233,7 @@ export default {
       // 第一步：列宽映射
       const draggingMap = {}
       columns.forEach((col) => {
-        draggingMap[col.dataIndex || col.key] = col.width
+        draggingMap[getKey(col)] = col.width
       })
       const draggingState = Vue.observable(draggingMap)
       // 第二步：表头渲染
@@ -239,15 +242,8 @@ export default {
         let thDom = null
         // 获取列的key值和特性
         const { key, ...restProps } = props
-        // if (renderField.includes(key)) {
-        //   return
-        // }
-        // renderField.push(key)
-        // 获取当前列
-        // const col = tbCols.find((col) => {
-        //   const k = col.dataIndex || col.key
-        //   return k === key
-        // })
+        // 获取最新列配置
+        const columns = cloneDeep(this.columns)
         let col
         if (key === 'selection-column') {
           col = {}
@@ -297,7 +293,7 @@ export default {
           >
             {children}
             <vue-draggable-resizable
-              key={col.dataIndex || col.key}
+              key={getKey(col)}
               class="table-draggable-handle"
               minw={10}
               w={10}

jero-web/src/components/jero/README_JTable.md

@@ -168,6 +168,7 @@ export default {
         resizable: true,
         title: 'Date',
         dataIndex: 'date',
+        minWidth: 200,
         width: 200
       },
       {
@@ -175,6 +176,7 @@ export default {
         columnTitle: 'Name',
         dataIndex: 'name',
         key: 'name',
+        minWidth: 100,
         slots: { title: 'customTitle' },
         scopedSlots: { customRender: 'name' }
       },
@@ -182,6 +184,7 @@ export default {
         title: 'Tags',
         key: 'tags',
         dataIndex: 'tags',
+        minWidth: 200,
         scopedSlots: { customRender: 'tags' }
       },
       {

jero-web/src/views/demo/list/JTableList.vue

@@ -75,6 +75,7 @@ export default {
         resizable: true,
         title: 'Date',
         dataIndex: 'date',
+        minWidth: 200,
         width: 200
       },
       {
@@ -82,6 +83,7 @@ export default {
         columnTitle: 'Name',
         dataIndex: 'name',
         key: 'name',
+        minWidth: 100,
         slots: { title: 'customTitle' },
         scopedSlots: { customRender: 'name' }
       },
@@ -89,6 +91,7 @@ export default {
         title: 'Tags',
         key: 'tags',
         dataIndex: 'tags',
+        minWidth: 200,
         scopedSlots: { customRender: 'tags' }
       },
       {