【修改】j-table修复BUG

jero-web/package-lock.json

@@ -14534,9 +14534,9 @@
       }
     },
     "sortablejs": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
-      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz",
+      "integrity": "sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg=="
     },
     "source-list-map": {
       "version": "2.0.1",
@@ -16516,6 +16516,13 @@
       "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
       "requires": {
         "sortablejs": "1.10.2"
+      },
+      "dependencies": {
+        "sortablejs": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+          "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+        }
       }
     },
     "vuex": {

jero-web/src/components/table/jTable.vue

@@ -14,10 +14,10 @@
         <a-dropdown :trigger="['click']">
           <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
             <!-- 操作 -->
-            <a-icon type="down" />
+            <a-icon type="caret-down" v-if="isShowIcon" />
           </a>
           <a-menu slot="overlay">
-            <a-sub-menu key="dj" title="冻结列头">
+            <a-sub-menu key="frozen" title="冻结列头">
               <a-menu-item>
                 <a-radio-group
                   v-model="a.slots.fixedValue"
@@ -33,10 +33,13 @@
                 </a-radio-group>
               </a-menu-item>
             </a-sub-menu>
-            <a-sub-menu key="sx" title="筛选列头">
-              <a-menu-item>
-                <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
-              </a-menu-item>
+            <a-sub-menu key="check" title="筛选列头">
+              <a-checkbox-group
+                v-model="checkedList"
+                :options="plainOptions"
+                @change="onChange"
+                :style="checkboxStyle"
+              />
             </a-sub-menu>
           </a-menu>
         </a-dropdown>
@@ -65,6 +68,12 @@ export default {
           return true
         },
       },
+      isShowDropdown: {
+        type: Boolean,
+        default() {
+          return true
+        },
+      },
     },
     Table.props,
     {
@@ -104,6 +113,10 @@ export default {
         height: '30px',
         lineHeight: '30px',
       },
+      checkboxStyle: {
+        display: 'block',
+        lineHeight: '30px',
+      },
     }
   },
   computed: {
@@ -121,12 +134,24 @@ export default {
         return false
       }
     },
+    isShowIcon() {
+      if (this.isShowDropdown) {
+        return true
+      } else {
+        return false
+      }
+    },
   },
   mounted() {
     // console.log(this.aColumns)
     // 遍历出筛选列头的所有选项
     this.columns.forEach((item) => {
-      this.plainOptions.push(item.dataIndex)
+      let colItem = {
+        value: item.slots.title,
+        label: item.slots.title,
+        disabled: false,
+      }
+      this.plainOptions.push(colItem)
     })
 
     // 读取localStorage中的数据
@@ -137,21 +162,43 @@ export default {
     }
     // 遍历出筛选列头中的已选项
     this.aColumns.forEach((item) => {
-      this.checkedList.push(item.dataIndex)
+      this.checkedList.push(item.slots.title)
     })
   },
   methods: {
     // 用户可自行筛选列头显示的字段
     // TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
     onChange(e) {
+      // 只剩一个时候,最后一个多选按钮禁用
+      if (this.checkedList.length === 1) {
+        this.plainOptions.forEach((item) => {
+          if (item.label === this.checkedList[0]) {
+            item.disabled = true
+          }
+        })
+      } else {
+        this.plainOptions.forEach((item) => {
+          item.disabled = false
+        })
+      }
+
+      let trfList = [] //将中文转换为dataIndex
       let initList = [] //最初始list
       let diffList = [] //两个数组不同
+      //转换为dataIndex
+      for (let i = 0; i < e.length; i++) {
+        this.columns.find((item) => {
+          if (item.slots.title === e[i]) {
+            trfList.push(item.dataIndex)
+          }
+        })
+      }
       // 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
       this.columns.forEach((item) => {
         initList.push(item.dataIndex)
       })
       // 拿到两个数组的不同的项
-      diffList = this.getArrDifference(e, initList)
+      diffList = this.getArrDifference(trfList, initList)
       if (diffList.length === 0) {
         // 如果数组为空，则把父组件传过来的表头赋值给
         this.aColumns = this.columns
@@ -168,6 +215,7 @@ export default {
       localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns))
       // console.log(JSON.parse(localStorage.getItem("pro__Cloumns")))
     },
+    // 比较两个数组之间的不同,生成新数组
     getArrDifference(arr1, arr2) {
       return arr1.concat(arr2).filter(function (v, i, arr) {
         return arr.indexOf(v) === arr.lastIndexOf(v)
@@ -182,6 +230,16 @@ export default {
             item.fixed = 'left'
           }
         })
+        // 左侧冻结,先把冻结项删除,再unshift到数组首位
+        let arr
+        for (let i = 0; i < this.aColumns.length; i++) {
+          if (this.aColumns[i].dataIndex === dataIndex) {
+            arr = this.aColumns.splice(i, 1)
+            break
+          }
+        }
+        this.aColumns.unshift(arr[0])
+        // console.log(this.aColumns)
       } else if (e.target.value === 2) {
         //右侧冻结
         this.aColumns.find((item) => {
@@ -189,6 +247,15 @@ export default {
             item.fixed = 'right'
           }
         })
+        // 右侧冻结,先把冻结项删除,再push到数组末位
+        let arr
+        for (let i = 0; i < this.aColumns.length; i++) {
+          if (this.aColumns[i].dataIndex === dataIndex) {
+            arr = this.aColumns.splice(i, 1)
+            break
+          }
+        }
+        this.aColumns.push(arr[0])
       } else {
         this.aColumns.find((item) => {
           //解冻
@@ -196,15 +263,47 @@ export default {
             item.fixed = false
           }
         })
+        this.diffColunms()
       }
     },
+    // 列头重新排序
+    diffColunms() {
+      // console.log(dataIndex)
+      let newColumnsList = [] //没有fixed属性的List
+      let newFixedLeftList = [] //fixed=left的List
+      let newFixedRightList = [] //fixed=right的List
+      this.aColumns.forEach((item) => {
+        if (!item.fixed) {
+          newColumnsList.push(item)
+        }
+      })
+      this.aColumns.forEach((item) => {
+        if (item.fixed === 'left') {
+          newFixedLeftList.push(item)
+        }
+      })
+      this.aColumns.forEach((item) => {
+        if (item.fixed === 'right') {
+          newFixedRightList.push(item)
+        }
+      })
+      // 冒泡排序,根据key重新排序
+      for (var i = 0; i < newColumnsList.length - 1; i++) {
+        for (var j = 0; j < newColumnsList.length - 1 - i; j++) {
+          if (newColumnsList[j].key > newColumnsList[j + 1].key) {
+            ;[newColumnsList[j], newColumnsList[j + 1]] = [newColumnsList[j + 1], newColumnsList[j]]
+          }
+        }
+      }
+      // 解构赋值,重新定义列头List
+      this.aColumns = [...[...newFixedLeftList, ...newColumnsList], ...newFixedRightList]
+    },
   },
 }
 </script>
 
 <style>
-.ant-checkbox-group-item {
-  display: block;
-  margin-bottom: 8px;
+.ant-dropdown-menu-submenu-popup {
+  width: 7.5rem;
 }
 </style>

jero-web/src/views/jero/jtable1.vue

@@ -1,6 +1,8 @@
 <template>
   <a-card :bordered="false">
-    <j-table :isShowPage="isShowPage" :isCheck="isCheck" :dataSource="dataSource" :columns="columns"></j-table>
+    <j-table :isShowPage="isShowPage" :isCheck="isCheck" :isShowDropdown="isShowDropdown" :dataSource="dataSource"
+      :columns="columns">
+    </j-table>
   </a-card>
 </template>
 
@@ -16,10 +18,11 @@
       return {
         isShowPage: true, // 是否显示分页
         isCheck: false, // 是否多选
+        isShowDropdown: true, //是否开启下拉功能
         dataSource: [{
           key: '1',
-          name: '胡彦斌',
-          age: 32,
+          name: '胡彦斌1',
+          age: 35,
           address: '西湖区湖底公园1号',
           address1: '西湖区湖底公园1号',
           address2: '西湖区湖底公园1号',
@@ -28,9 +31,9 @@
           address5: '西湖区湖底公园1号',
         }, {
           key: '2',
-          name: '胡彦斌',
+          name: '胡彦斌2',
           age: 32,
-          address: '西湖区湖底公园1号',
+          address: '西湖区湖底公园3号',
           address1: '西湖区湖底公园1号',
           address2: '西湖区湖底公园1号',
           address3: '西湖区湖底公园1号',
@@ -38,9 +41,9 @@
           address5: '西湖区湖底公园1号',
         }, {
           key: '3',
-          name: '胡彦斌',
+          name: '胡彦斌3',
           age: 32,
-          address: '西湖区湖底公园1号',
+          address: '西湖区湖底公园5号',
           address1: '西湖区湖底公园1号',
           address2: '西湖区湖底公园1号',
           address3: '西湖区湖底公园1号',
@@ -48,9 +51,9 @@
           address5: '西湖区湖底公园1号',
         }, {
           key: '4',
-          name: '胡彦斌',
+          name: '胡彦斌4',
           age: 32,
-          address: '西湖区湖底公园1号',
+          address: '西湖区湖底公园7号',
           address1: '西湖区湖底公园1号',
           address2: '西湖区湖底公园1号',
           address3: '西湖区湖底公园1号',
@@ -58,9 +61,9 @@
           address5: '西湖区湖底公园1号',
         }, {
           key: '5',
-          name: '胡彦斌',
-          age: 32,
-          address: '西湖区湖底公园1号',
+          name: '胡彦斌5',
+          age: 38,
+          address: '西湖区湖底公园9号',
           address1: '西湖区湖底公园1号',
           address2: '西湖区湖底公园1号',
           address3: '西湖区湖底公园1号',
@@ -68,9 +71,9 @@
           address5: '西湖区湖底公园1号',
         }, {
           key: '6',
-          name: '胡彦斌',
+          name: '胡彦斌6',
           age: 32,
-          address: '西湖区湖底公园1号',
+          address: '西湖区湖底公园11号',
           address1: '西湖区湖底公园1号',
           address2: '西湖区湖底公园1号',
           address3: '西湖区湖底公园1号',
@@ -80,7 +83,7 @@
         columns: [{
             // title: '姓名',
             dataIndex: 'name',
-            key: 'name',
+            key: 1,
             width: 200,
             slots: {
               title: '姓名',
@@ -89,32 +92,35 @@
               // 2为右侧冻结
               // 3为不冻结或解冻
               fixedValue: 3
-            }
+            },
+            // fixed: 'right'
           },
           {
             // title: '年龄',
             dataIndex: 'age',
-            key: 'age',
+            key: 2,
             width: 200,
             slots: {
               title: '年龄',
               fixedValue: 3
-            }
+            },
+            // sorter: (a, b) => a.age - b.age,
           },
           {
             // title: '住址',
             dataIndex: 'address',
-            key: 'address',
+            key: 3,
             width: 200,
             slots: {
               title: '住址',
               fixedValue: 3
-            }
+            },
+            // sorter: (a, b) => a.address.length - b.address.length,
           },
           {
             // title: '住址1',
             dataIndex: 'address1',
-            key: 'address1',
+            key: 4,
             width: 200,
             slots: {
               title: '住址1',
@@ -124,7 +130,7 @@
           {
             // title: '住址2',
             dataIndex: 'address2',
-            key: 'address2',
+            key: 5,
             width: 200,
             slots: {
               title: '住址2',
@@ -134,7 +140,7 @@
           {
             // title: '住址3',
             dataIndex: 'address3',
-            key: 'address3',
+            key: 6,
             width: 200,
             slots: {
               title: '住址3',
@@ -144,7 +150,7 @@
           {
             // title: '住址4',
             dataIndex: 'address4',
-            key: 'address4',
+            key: 7,
             width: 200,
             slots: {
               title: '住址4',
@@ -154,7 +160,7 @@
           {
             // title: '住址5',
             dataIndex: 'address5',
-            key: 'address5',
+            key: 8,
             slots: {
               title: '住址5',
               fixedValue: 3