【修改】JTable的代码逻辑调整

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

@@ -14,7 +14,7 @@
       </template>
 
       <span :slot="a.slots.title" v-for="a in aColumns" :key="a.dataIndex">
-          {{ a.title }}
+          {{ a.slots.title }}
           <a-dropdown :trigger="['click']">
             <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
               <!-- 操作 -->
@@ -53,55 +53,51 @@ import { Table } from 'ant-design-vue'
 
 export default {
   name: 'JTable',
-  props: Object.assign(
+  props: {
-    {
+    ...Table.props,
-      isShowPage: {
+    isShowPage: {
-        type: Boolean,
+      type: Boolean,
-        default() {
+      default() {
-          return true
+        return true
-        },
-      },
-      isCheck: {
-        type: Boolean,
-        default() {
-          return true
-        },
-      },
-      isShowDropdown: {
-        type: Boolean,
-        default() {
-          return true
-        },
       },
     },
-    Table.props,
+    isCheck: {
-    {
+      type: Boolean,
-      rowSelection: {
+      default() {
-        type: Object,
+        return true
-        default() {
-          return {
-            type: 'checkbox',
-          }
-        },
       },
-      pagination: {
+    },
-        type: Object,
+    isShowDropdown: {
-        default() {
+      type: Boolean,
-          return {
+      default() {
-            current: 1,
+        return true
-            pageSize: 10,
-            pageSizeOptions: ['10', '20', '30'],
-            showTotal: (total, range) => {
-              return range[0] + '-' + range[1] + ' 共' + total + '条'
-            },
-            showQuickJumper: true,
-            showSizeChanger: true,
-            total: 0,
-          }
-        },
       },
-    }
+    },
-  ),
+    rowSelection: {
+      type: Object,
+      default() {
+        return {
+          type: 'checkbox',
+        }
+      },
+    },
+    pagination: {
+      type: Object,
+      default() {
+        return {
+          current: 1,
+          pageSize: 10,
+          pageSizeOptions: ['10', '20', '30'],
+          showQuickJumper: true,
+          showSizeChanger: true,
+          total: 0,
+          showTotal: (total, range) => {
+            return range[0] + '-' + range[1] + ' 共' + total + '条'
+          }
+        }
+      },
+    },
+  },
   data() {
     return {
       aColumns: this.columns,
@@ -147,14 +143,11 @@ export default {
     }
   },
   mounted() {
-    // console.log(this.aColumns)
-    // console.log(this.columns)
-    console.log(this.$attrs)
     // 遍历出筛选列头的所有选项
     this.columns.forEach((item) => {
       let colItem = {
-        value: item.title,
+        value: item.slots.title,
-        label: item.title,
+        label: item.slots.title,
         disabled: false,
       }
       this.plainOptions.push(colItem)
@@ -168,7 +161,7 @@ export default {
     }
     // 遍历出筛选列头中的已选项
     this.aColumns.forEach((item) => {
-      this.checkedList.push(item.title)
+      this.checkedList.push(item.slots.title)
     })
   },
   methods: {
@@ -193,7 +186,7 @@ export default {
       //转换为dataIndex
       for (let i = 0; i < e.length; i++) {
         this.columns.find((item) => {
-          if (item.title === e[i]) {
+          if (item.slots.title === e[i]) {
             trfList.push(item.dataIndex)
           }
         })
@@ -210,7 +203,6 @@ export default {
         localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns))
         return
       }
-      // TODO midColumns这个变量应该声明为局部变量，作为全局变量但没有全局使用是不合理的
       let midColumns = this.columns
       for (let i = 0; i < diffList.length; i++) {
         midColumns = midColumns.filter((item) => item.dataIndex !== diffList[i])
@@ -218,7 +210,6 @@ export default {
       this.aColumns = midColumns
 
       localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns))
-      // console.log(JSON.parse(localStorage.getItem("pro__Cloumns")))
     },
     // 比较两个数组之间的不同,生成新数组
     getArrDifference(arr1, arr2) {
@@ -227,7 +218,11 @@ export default {
       })
     },
     fixedChange(e, dataIndex) {
-      // console.log(e.target.value, dataIndex)
+      // 冻结列头的参数
+      // 1为左侧冻结
+      // 2为右侧冻结
+      // 3为不冻结或解冻
+
       if (e.target.value === 1) {
         //左侧冻结
         this.aColumns.find((item) => {
@@ -244,7 +239,6 @@ export default {
           }
         }
         this.aColumns.unshift(arr[0])
-        // console.log(this.aColumns)
       } else if (e.target.value === 2) {
         //右侧冻结
         this.aColumns.find((item) => {
@@ -273,7 +267,6 @@ export default {
     },
     // 列头重新排序
     diffColunms() {
-      // console.log(dataIndex)
       let newColumnsList = [] //没有fixed属性的List
       let newFixedLeftList = [] //fixed=left的List
       let newFixedRightList = [] //fixed=right的List

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

@@ -2,15 +2,18 @@
   <a-card :bordered="false">
     <j-table
       :isShowPage="isShowPage"
+      :pagination="pagination"
       :isCheck="isCheck"
       :isShowDropdown="isShowDropdown"
       :dataSource="dataSource"
       :columns="columns"
       bordered
     >
-      <!-- 参数必须加 {} 包裹，否则只能拿到一个对象 -->
+      <!-- slot-scope参数必须加 {} 包裹，否则只能拿到一个对象 -->
       <span slot="action" slot-scope="{text, record, index}">
-        text: {{ text }}- record:{{ record }}- index:{{ index }}
+<!--        text: {{ text }}-->
+<!--        record:{{ record }}-->
+<!--        index:{{ index }}-->
       </span>
 
     </j-table>
@@ -30,6 +33,17 @@ export default {
       isShowPage: true, // 是否显示分页
       isCheck: false, // 是否多选
       isShowDropdown: true, //是否开启下拉功能
+      pagination: {
+        current: 1,
+        pageSize: 100,
+        pageSizeOptions: ['100', '200', '300'],
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0,
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        }
+      },
       dataSource: [
         {
           key: '1',
@@ -100,7 +114,7 @@ export default {
       ],
       columns: [
         {
-          title: '姓名',
+          // title: '姓名',
           dataIndex: 'name',
           key: 1,
           width: 200,
@@ -116,75 +130,72 @@ export default {
 
         },
         {
-          title: '年龄',
           dataIndex: 'age',
           key: 2,
           width: 200,
           slots: {
-            // title: '年龄',
+            title: '年龄',
             fixedValue: 3,
           },
           sorter: true,
         },
         {
-          title: '住址',
           dataIndex: 'address',
           key: 3,
           width: 200,
-          // sorter: true,
           slots: {
-            // title: '住址',
+            title: '住址',
             fixedValue: 3,
           },
           sorter: (a, b) => a.address.length - b.address.length,
         },
         {
-          title: '住址1',
+          // title: '住址1',
           dataIndex: 'address1',
           key: 4,
           width: 200,
           slots: {
-            // title: '住址1',
+            title: '住址1',
             fixedValue: 3,
           },
         },
         {
-          title: '住址2',
+          // title: '住址2',
           dataIndex: 'address2',
           key: 5,
           width: 200,
           slots: {
-            // title: '住址2',
+            title: '住址2',
             fixedValue: 3,
           },
         },
         {
-          title: '住址3',
+          // title: '住址3',
           dataIndex: 'address3',
           key: 6,
           width: 200,
           slots: {
-            // title: '住址3',
+            title: '住址3',
             fixedValue: 3,
           },
         },
         {
-          title: '住址4',
+          // title: '住址4',
           dataIndex: 'address4',
           key: 7,
           width: 200,
           slots: {
-            // title: '住址4',
+            title: '住址4',
             fixedValue: 3,
           },
         },
         {
-          title: '住址5',
+          // title: '住址5',
           dataIndex: 'address5',
           key: 8,
           width: 500,
           slots: {
-            // title: '住址5',
+            title: '住址5',
             fixedValue: 3,
           },
         },
@@ -195,7 +206,7 @@ export default {
           width: 500,
           slots: {
             // title: '操作',
-            fixedValue: 3,
+            fixedValue: 2,
           },
           scopedSlots: { customRender: 'action' },
         },