【fix 66426】JTable拖拽效果案例及md文档

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

@@ -1,51 +1,29 @@
 <template>
   <a-card :bordered="false">
     <div>
-      <div>
-        <a-button @click="clearCurrentCache(1)">清理表1缓存</a-button>
-        <a-button @click="clearCurrentCache(2)">清理表2缓存</a-button>
-        <a-button @click="clearJTableCache">清理全局缓存</a-button>
+      <div style="margin-bottom: 5px;">
+        <a-button @click="resetTable">重置表格配置</a-button>
+        <a-button @click="clearTableCache" style="margin-left: 5px;">清空本表缓存</a-button>
+        <a-button @click="clearAllTableCache" style="margin-left: 5px;">清空全局JTable缓存</a-button>
       </div>
       <j-table  bordered
-                :table-key="$route.name + '_table1'"
-                ref='table1'
-                rowKey='key'
-                tableLayout='fixed'
-                :scroll="{ x: 2000 }"
+                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+                :table-key="$route.name + '_table'"
+                ref="table"
+                rowKey="key"
                 :data-source="dataSource"
+                :scroll.sync="scroll"
                 :columns.sync="columns">
 
         <span slot="action" slot-scope="{record}">
           <a-popconfirm
             v-if="dataSource.length"
-            title="Sure to delete?"
+            title="是否删除?"
             @confirm="() => onDelete(record.key)"
           >
           <a href="javascript:">Delete</a>
         </a-popconfirm>
         </span>
-
-      </j-table>
-
-      <j-table  bordered
-                :table-key="$route.name + '_table2'"
-                ref='table2'
-                rowKey='key'
-                tableLayout='fixed'
-                :scroll="{ x: 2000 }"
-                :data-source="dataSource"
-                :columns.sync="columns">
-
-        <span slot="action" slot-scope="{record}">
-          <a-popconfirm
-            v-if="dataSource.length"
-            title="Sure to delete?"
-            @confirm="() => onDelete(record.key)"
-          >
-          <a href="javascript:">Delete</a>
-        </a-popconfirm>
-        </span>
-
       </j-table>
     </div>
 
@@ -61,42 +39,52 @@ export default {
   data () {
     const columns = [
       {
-        // 是否在配置表格中显示
+        // 是否在配置表中隐藏
         // hideSettingColumn: true,
-        // 尽量要有minWidth，冻结列时会临时使用作为width
+        // 尽量都设置最小宽度，冻结列与拖拽时生效
         minWidth: 100,
-        // 禁用配置表格中的隐藏或冻结
-        // disabledHide: true,
-        // disabledFreeze: true,
+        width: 100,
+        // 禁用配置表中的隐藏或冻结
+        disabledHide: true,
+        disabledFreeze: true,
+        // 可拖拽属性（不能fixed一起用）
+        // resizable: true,
+        // 默认冻结，值可以是 'left' 或 true
+        fixed: true,
         title: '#',
         ellipsis: true,
-        dataIndex: 'key',
-        fixed: true
+        dataIndex: 'key'
       },
       {
+        resizable: true,
         title: 'Date',
         dataIndex: 'date',
-        minWidth: 200
+        width: 200
       },
       {
+        resizable: true, // 可拖拽属性
         title: 'Amount',
         dataIndex: 'amount',
-        minWidth: 100
+        minWidth: 100,
+        width: 100
       },
       {
         title: 'Type',
         dataIndex: 'type',
-        minWidth: 100
+        width: 100
       },
       {
         title: 'Note',
-        dataIndex: 'note',
-        minWidth: 100
+        dataIndex: 'note'
+        // 保留一列自适应
+        // width: 100
       },
       {
         title: 'Action',
         key: 'action',
-        width: 200
+        width: 200,
+        // filterIcon 和 filterDropdown 不能使用
+        scopedSlots: { customRender: 'action' }
       }
     ]
     const dataSource = [
@@ -123,26 +111,36 @@ export default {
       }
     ]
     return {
-      columns,
-      dataSource
+      scroll: { x: 1400 },
+      columns: columns,
+      dataSource: dataSource,
+      selectedRowKeys: []
     }
   },
   methods: {
+    // 还原表格初始配置
+    resetTable () {
+      this.$refs.table.resteColumns()
+    },
     // 清除当前表格缓存
-    clearCurrentCache (n) {
-      this.$refs['table' + n].clearSetting()
+    clearTableCache () {
+      this.$refs.table.clearSetting()
     },
     // 清除所有缓存
-    clearJTableCache () {
-      this.$refs.table1.clearAllCacheSetting()
+    clearAllTableCache () {
+      this.$refs.table.clearAllCacheSetting()
     },
     onDelete (key) {
       this.$message.info(`del:${key}`)
+    },
+    onSelectChange (selectedRowKeys) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys)
+      this.selectedRowKeys = selectedRowKeys
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang='less' scoped>
+@import '~@assets/less/common.less';
 </style>