【fix 66426】JTable修复插槽不能使用

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

@@ -52,7 +52,7 @@
 在[示例](#示例)中，设定了一个 `ref="table"` 的属性，那么在vue中就可以使用`this.$refs.table`获取到该表格的实例，并调取其中的方法。
 假如我要调取`resteColumns`方法，就可以这么写：`this.$refs.table.resteColumns()`
 
-### columns和scroll为什么要使用`.sync`
+### `columns`和`scroll`为什么要使用`.sync`
 
 保证父组件和子组件数据同步
 
@@ -60,35 +60,68 @@
 `scroll`拖拽后会把最新的总宽度同步
 
 
-### 对原ATable的使用有哪些限制
+### 对原`a-table`的使用有哪些限制
 
  - 操作列的`dataIndex`或`key`必须为`action`
- - 带有设置的列不能使用`scopedSlots.filterIcon` 和 `scopedSlots.filterDropdown`
+ - 带有设置的列不能使用`scopedSlots.filterIcon` 和 `scopedSlots.filterDropdown`(没有操作列时，设置在最后一列)
  - `scroll.x`和`width`必须是数字，不支持百分比
+ - 使用作用域插槽，需要使用解构赋值，里面有三个参数`{text, record, index}`，可参考[示例](#示例)写法
+
+### 拖拽后没有设置宽度的列会被缩小
+
+ - 设置scroll.x配置一个默认宽度即可
+
+### 出现空白列
+
+ - 设置至少一列没有width（没有width不能被拖拽）
+ - 建议没有`width`的列不能手动控制隐藏和冻结，使用`disabledHide`和`disabledFreeze`或者`hideSettingColumn`
+
+### `resizable`没有效果
+
+ - 需要设置`resizable: true`，要有`width`，且不能有`fixed`
+
+### 自定义列的弹框会消失
+
+ - 因为冻结列的出现或消失会刷新表格结构导致弹框丢失
+ - 设置一个冻结列始终存在，不可被手动控制隐藏和取消冻结即可
 
 ### 注意事项
 
+ - `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置
  - 固定头和列（ant-design-vue自带的问题） ：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
    建议指定 scroll.x 为大于表格宽度的固定值。注意，且非固定列宽度之和不要超过 `scroll.x`。
- - `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置
 
 ## 示例
 
 ```vue
 <template>
     <div>
-      <a-button @click="resetTable">重置表格配置</a-button>
-      <a-button @click="clearTableCache">清空本表缓存</a-button>
-      <a-button @click="clearAllTableCache">清空全局JTable缓存</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
                 :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-                :table-key="$route.name + '_table'"
+                :table-key="$route.name + '_table1'"
                 ref="table"
                 rowKey="key"
                 :data-source="dataSource"
                 :scroll.sync="scroll"
                 :columns.sync="columns">
-        
+        <!--  使用插槽  -->
+        <a slot="name" slot-scope="{text}">{{ text }}</a>
+        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
+        <span slot="tags" slot-scope="{text: tags}">
+        <a-tag
+          v-for="tag in tags"
+          :key="tag"
+          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+        >
+          {{ tag.toUpperCase() }}
+        </a-tag>
+        </span>
+
         <span slot="action" slot-scope="{record}">
           <a-popconfirm
             v-if="dataSource.length"
@@ -98,6 +131,10 @@
           <a href="javascript:">Delete</a>
         </a-popconfirm>
         </span>
+
+        <template slot="footer" slot-scope="currentPageData">
+          Footer：{{ currentPageData }}
+        </template>
       </j-table>
     </div>
 </template>
@@ -108,7 +145,6 @@ import JTable from '@comp/jero/JTable'
 export default {
   name: 'Demo',
   components: { JTable },
-
   data () {
     const columns = [
       {
@@ -126,7 +162,7 @@ export default {
         fixed: true,
         title: '#',
         ellipsis: true,
-        dataIndex: 'key',
+        dataIndex: 'key'
       },
       {
         resizable: true,
@@ -134,6 +170,20 @@ export default {
         dataIndex: 'date',
         width: 200
       },
+      {
+        // 标题使用插槽使用这个代替title（用于设置里显示列名）
+        columnTitle: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        slots: { title: 'customTitle' },
+        scopedSlots: { customRender: 'name' }
+      },
+      {
+        title: 'Tags',
+        key: 'tags',
+        dataIndex: 'tags',
+        scopedSlots: { customRender: 'tags' }
+      },
       {
         resizable: true, // 可拖拽属性
         title: 'Amount',
@@ -148,9 +198,13 @@ export default {
       },
       {
         title: 'Note',
-        dataIndex: 'note'
+        dataIndex: 'note',
         // 保留一列自适应
         // width: 100
+        // 建议：没有宽度的列至少一列禁止自定义（解决冻结或隐藏列导致出现空列）
+        // disabledHide: true,
+        // disabledFreeze: true,
+        hideSettingColumn: true
       },
       {
         title: 'Action',
@@ -163,6 +217,8 @@ export default {
     const dataSource = [
       {
         key: 0,
+        name: 'John Brown',
+        tags: ['nice', 'developer'],
         date: '2018-02-11',
         amount: 120,
         type: 'income',
@@ -170,6 +226,8 @@ export default {
       },
       {
         key: 1,
+        name: 'Jim Green',
+        tags: ['loser'],
         date: '2018-03-11',
         amount: 243,
         type: 'income',
@@ -177,6 +235,8 @@ export default {
       },
       {
         key: 2,
+        name: 'Joe Black',
+        tags: ['cool', 'teacher'],
         date: '2018-04-11',
         amount: 98,
         type: 'income',
@@ -184,7 +244,7 @@ export default {
       }
     ]
     return {
-      scroll: { x: 1000 },
+      scroll: { x: 1400 },
       columns: columns,
       dataSource: dataSource,
       selectedRowKeys: []
@@ -192,7 +252,7 @@ export default {
   },
   methods: {
     // 还原表格初始配置
-    resetTable() {
+    resetTable () {
       this.$refs.table.resteColumns()
     },
     // 清除当前表格缓存