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

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' },
         },