Merge remote-tracking branch 'origin/fix-bug-202303' into fix-bug-202303

2023-03-21 10:36:26 +08:00
parent 03a6d1e0ca 13e8c94ec9
commit 1a9c072bd3
6 changed files with 214 additions and 97 deletions
@@ -1855,7 +1855,7 @@ INSERT INTO `sys_role_permission` VALUES ('f99f99cc3bc27220cdd4f5aced33b7d7', 'f
 INSERT INTO `sys_role_permission` VALUES ('fafe73c4448b977fe42880a6750c3ee8', 'f6817f48af4fb3af11b9e8bf182f618b', '9cb91b8851db0cf7b19d7ecc2a8193dd', null, null, null);
 INSERT INTO `sys_role_permission` VALUES ('fced905c7598973b970d42d833f73474', 'f6817f48af4fb3af11b9e8bf182f618b', '4875ebe289344e14844d8e3ea1edd73f', null, null, null);
 INSERT INTO `sys_role_permission` VALUES ('fd97963dc5f144d3aecfc7045a883427', 'f6817f48af4fb3af11b9e8bf182f618b', '043780fa095ff1b2bec4dc406d76f023', null, null, null);
-INSERT INTO `sys_role_permission` VALUES ('1637690312462643202', 'f6817f48af4fb3af11b9e8bf182f618b', '1636190218344304641', NULL, '2023-03-20 13:39:32', '127.0.0.1');
+INSERT INTO `sys_role_permission` VALUES ('1637690312462643202', 'f6817f48af4fb3af11b9e8bf182f618b', '1636190218344304641', NULL, NULL, NULL);

 -- ----------------------------
 -- Table structure for sys_sms
@@ -2116,6 +2116,8 @@ INSERT INTO "SYS_PERMISSION" VALUES ('1383956779212550146', '3f915b2769fc80648e9
 INSERT INTO "SYS_PERMISSION" VALUES ('1260931366557696001', '3f915b2769fc80648e92d04e84ca059d', '表单性别可见', null, null, null, null, '2', 'user:sex', '1', '1', '0', null, '1', '1', '0', '0', null, 'admin', TO_DATE('2020-05-14 21:53:59', 'YYYY-MM-DD HH24:MI:SS'), 'admin', TO_DATE('2020-05-14 21:57:00', 'YYYY-MM-DD HH24:MI:SS'), '0', '0', '1', '0');
 INSERT INTO "SYS_PERMISSION" VALUES ('1260933542969458689', '3f915b2769fc80648e92d04e84ca059d', '禁用生日字段', null, null, null, null, '2', 'user:form:birthday', '2', '1', '0', null, '1', '1', '0', '0', null, 'admin', TO_DATE('2020-05-14 22:02:38', 'YYYY-MM-DD HH24:MI:SS'), null, null, '0', '0', '1', '0');
 INSERT INTO "SYS_PERMISSION" VALUES ('1404684556047024130', '08e6b9dc3c04489c8e1ff2ce6f105aa4', '在线用户', '/isystem/online', 'system/SysUserOnlineList', null, null, '1', null, null, '3', '0', null, '1', '0', '0', '0', null, 'admin', TO_DATE('2019-04-02 11:34:34', 'YYYY-MM-DD HH24:MI:SS'), 'admin', TO_DATE('2020-09-09 14:48:51', 'YYYY-MM-DD HH24:MI:SS'), '0', '0', null, '0');
+INSERT INTO `SYS_PERMISSION` VALUES ('1636190218344304641', '540a2936940846cb98114ffb0d145cb8', 'JTable列表', '/list/j-table-list', 'demo/list/JTableList', NULL, NULL, 1, NULL, '1', 1.00, 0, NULL, 1, 1, 0, 0, NULL, 'admin', '2023-03-16 10:18:42', 'admin', '2023-03-16 10:25:49', 0, 0, '1', 0);
+

 -- ----------------------------
 -- Table structure for SYS_PERMISSION_DATA_RULE
@@ -2425,6 +2427,7 @@ INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('a5d25fdb3c62904a8474182706ce11a0', 'f
 INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('acacce4417e5d7f96a9c3be2ded5b4be', 'f6817f48af4fb3af11b9e8bf182f618b', 'f9d3f4f27653a71c52faa9fb8070fbe7', NULL, NULL, NULL);
 INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('ae1852fb349d8513eb3fdc173da3ee56', 'f6817f48af4fb3af11b9e8bf182f618b', '8d4683aacaa997ab86b966b464360338', NULL, NULL, NULL);
 INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('af60ac8fafd807ed6b6b354613b9ccbc', 'f6817f48af4fb3af11b9e8bf182f618b', '58857ff846e61794c69208e9d3a85466', NULL, NULL, NULL);
+INSERT INTO `SYS_ROLE_PERMISSION` VALUES ('1637690312462643202', 'f6817f48af4fb3af11b9e8bf182f618b', '1636190218344304641', NULL, NULL, NULL);

 -- ----------------------------
 -- Table structure for SYS_SMS
@@ -5717,6 +5717,9 @@ GO
 INSERT INTO [dbo].[sys_permission] ([id], [parent_id], [name], [url], [component], [component_name], [redirect], [menu_type], [perms], [perms_type], [sort_no], [always_show], [icon], [is_route], [is_leaf], [keep_alive], [hidden], [description], [create_by], [create_time], [update_by], [update_time], [del_flag], [rule_flag], [status], [internal_or_external]) VALUES (N'1404684556047024130', N'08e6b9dc3c04489c8e1ff2ce6f105aa4', N'在线用户', N'/isystem/online', N'system/SysUserOnlineList',NULL, NULL, N'1', NULL, NULL, N'3', N'0', NULL, N'1', N'0', N'0', N'0', NULL, N'admin', N'2019-04-02 11:34:34.0000000', N'admin', N'2020-09-09 14:48:51.0000000', N'0', N'0', NULL, N'0');
 GO

+INSERT INTO [dbo].[sys_permission] ([id], [parent_id], [name], [url], [component], [component_name], [redirect], [menu_type], [perms], [perms_type], [sort_no], [always_show], [icon], [is_route], [is_leaf], [keep_alive], [hidden], [description], [create_by], [create_time], [update_by], [update_time], [del_flag], [rule_flag], [status], [internal_or_external]) VALUES (N'1636190218344304641', N'540a2936940846cb98114ffb0d145cb8', N'JTable列表', N'/list/j-table-list', N'demo/list/JTableList',NULL, NULL, N'1', NULL, N'1', N'1.00', N'0', NULL, N'1', N'1', N'0', N'0', NULL, N'admin', N'2023-03-16 10:18:42.0000000', N'admin', N'2023-03-16 10:25:49.0000000', N'0', N'0', N'1', N'0');
+GO
+
 -- ----------------------------
 -- Table structure for sys_permission_data_rule
 -- ----------------------------
@@ -6518,6 +6521,8 @@ GO
 INSERT INTO [dbo].[sys_role_permission] ([id], [role_id], [permission_id], [data_rule_ids], [operate_date], [operate_ip]) VALUES (N'fd97963dc5f144d3aecfc7045a883427', N'f6817f48af4fb3af11b9e8bf182f618b', N'043780fa095ff1b2bec4dc406d76f023', NULL, NULL, NULL)
 GO

+INSERT INTO [dbo].[sys_role_permission] ([id], [role_id], [permission_id], [data_rule_ids], [operate_date], [operate_ip]) VALUES (N'1637690312462643202', N'f6817f48af4fb3af11b9e8bf182f618b', N'1636190218344304641', NULL, NULL, NULL)
+GO

 -- ----------------------------
 -- Table structure for sys_sms
@@ -10,9 +10,12 @@
    v-bind="$attrs"
    v-on="$listeners">

-    <template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
-      <slot :name="slotItem" v-bind="{text,record,index}"></slot>
+      <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
+    <template v-for="(_, slotName) in $scopedSlots" :slot="slotName" slot-scope="text, record, index">
+      <slot :name="slotName" v-bind="{text, record, index}" />
    </template>
+    <!-- 如果是普通插槽，直接使用$slots渲染 -->
+    <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName"/>

    <div slot="settingDropdown">
      <a-card>
@@ -38,7 +41,7 @@
        </a-table>
      </a-card>
    </div>
-    <a-icon ref='settingBtn' slot="settingIcon" type='setting' :style="{ fontSize:'16px', color: '#108ee9' }" />
+    <a-icon ref="settingBtn" slot="settingIcon" type="setting" :style="{ fontSize:'16px', color: '#108ee9' }" />

  </a-table>
 </template>
@@ -99,6 +102,7 @@ export default {
  },
  data () {
    return {
+      // settingVisible: false,
      // 设置表格
      settingColumns: [
        { title: '列名', dataIndex: 'title', align: 'center', ellipsis: true, width: 150 },
@@ -116,17 +120,6 @@ export default {
      selfScroll: {}
    }
  },
-  computed: {
-    slots () {
-      const slots = []
-      for (const column of this.columns) {
-        if (column.scopedSlots && column.scopedSlots.customRender) {
-          slots.push(column.scopedSlots.customRender)
-        }
-      }
-      return slots
-    }
-  },
  watch: {
    // 配置列改变，将配置转换成配置表格数据
    settingColumnsObj: {
@@ -145,7 +138,7 @@ export default {
            return
          }
          dataSource.push({
-            title: col.title, // 用于显示的字段
+            title: col.title || col.columnTitle, // 用于显示的字段
            key: tempKey, // 用于存储的字段
            hide: this.settingColumnsObj.hide.includes(tempKey), // 是否隐藏
            freeze: this.settingColumnsObj.freeze.includes(tempKey), // 是否冻结
@@ -154,24 +147,89 @@ export default {
          })
        })
        this.settingDataSource = dataSource
-        this.setResultColumns()
+        // 自定义列配置修改后，更新表格字段
+        this.setResultColumns(this.columns)
      }
    }
  },
  methods: {
+    // 将父组件的columns进行处理：增加设置列按钮
+    setResultColumns (columns) {
+      // 深度克隆，防止直接修改父组件数据
+      columns = cloneDeep(columns)
+      // 设置按钮插槽配置
+      const settingOption = {
+        filterDropdown: 'settingDropdown',
+        filterIcon: 'settingIcon'
+      }
+      let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey))
+      // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列）
+      if (findActionIndex === -1) {
+        findActionIndex = columns.length - 1
+      }
+      if (columns[findActionIndex].scopedSlots instanceof Object) {
+        Object.assign(columns[findActionIndex].scopedSlots, settingOption)
+      } else {
+        columns[findActionIndex].scopedSlots = settingOption
+      }
+      // 自定义设置弹框（尝试解决表格刷新丢失弹框的问题）此方法会出现两个弹框
+      // columns[findActionIndex].filterDropdownVisible = this.settingVisible
+      // columns[findActionIndex].onFilterDropdownVisibleChange = (visible) => {
+      //   this.settingVisible = visible
+      // }
+
+      // 最后过滤掉需要隐藏的字段,按定位进行排序
+      const startArr = [] // 冻结左侧的列
+      const midArr = [] // 没有冻结的列
+      const endArr = [] // 冻结右侧的列(只能是action，暂时不能自定义固定右侧)
+      columns.forEach(col => {
+        const key = getKey(col)
+        const fixed = this.settingColumnsObj.freeze.includes(key)
+        col.hide = this.settingColumnsObj.hide.includes(key)
+        col.fixed = key === actionKey ? 'right' : fixed
+        // 如果是字符串就转换成数字（因为实现拖拽，单位只能是px）
+        col.width = col.width && parseInt(col.width + '')
+        // 如果没有最小宽度就获取统一设置的最小宽度
+        col.minWidth = (col.minWidth && parseInt(col.minWidth + '')) || this.columnMinWidth
+        if (!col.hide) {
+          // 如果没有宽度就取minWidth（不添加原数据的width属性，这里只对需要固定的minWidth生效）
+          const width = col.width || col.minWidth
+          switch (col.fixed) {
+            case true:
+            case 'left':
+              startArr.push({ ...col, width })
+              break
+            case 'right':
+              endArr.push({ ...col, width })
+              break
+            default:
+              midArr.push(col)
+          }
+        }
+      })
+      // 更新父组件的数据，将排序后的进行渲染
+      this.$emit('update:columns', columns)
+      // 按冻结顺序排序
+      this.resultColumns = [...startArr.sort((a, b) => {
+        const freezeArr = this.settingColumnsObj.freeze
+        return freezeArr.indexOf(getKey(a)) - freezeArr.indexOf(getKey(b))
+      }), ...midArr, ...endArr]
+      return this.resultColumns
+    },
    // 初始化表格拖拽
-    initDrag (tbCols) {
+    initDrag (columns) {
+      columns = cloneDeep(columns)
      // 没有边框就不能拖拽
      if (!this.bordered) {
        return
      }
      // 如果没有任何列开启拖拽就不需要拖拽
-      if (!tbCols.some(col => col.resizable)) {
+      if (!columns.some(col => col.resizable)) {
        return
      }
      // 第一步：列宽映射
      const draggingMap = {}
-      tbCols.forEach((col) => {
+      columns.forEach((col) => {
        draggingMap[col.dataIndex || col.key] = col.width
      })
      const draggingState = Vue.observable(draggingMap)
@@ -194,14 +252,14 @@ export default {
        if (key === 'selection-column') {
          col = {}
        } else {
-          col = this.columns.find(col => getKey(col) === key)
+          col = columns.find(col => getKey(col) === key)
        }
        // 没有开启拖拽 或 没有宽度 或 有定位，都不能拖拽（防止布局异常，至少有一列不设width并且不能有fixed）
        if (!col.resizable || !col.width || !!col.fixed) {
          return <th {...restProps}>{children}</th>
        }
        // 开始拖拽监听
-        const onDrag = (x) => {
+        const onDragging = (x) => {
          const beforeWidth = col.width
          const scroll = cloneDeep(this.scroll) || {}
          draggingState[key] = 0
@@ -219,11 +277,17 @@ export default {
          } else {
            this.selfScroll = scroll
          }
+          // 修改列宽后，更新表格字段
+          this.setResultColumns(columns)
        }
        // 停止拖拽监听
        const onDragstop = () => {
          draggingState[key] = thDom.getBoundingClientRect().width
        }
+        // 控制最小拖拽宽度
+        const onDrag = (x) => {
+          return x >= (col.minWidth || this.columnMinWidth)
+        }
        return (
          <th
            {...restProps}
@@ -242,67 +306,14 @@ export default {
              axis="x"
              draggable={true}
              resizable={false}
-              onDragging={onDrag}
+              props={{ onDrag }}
+              onDragging={onDragging}
              onDragstop={onDragstop}
            ></vue-draggable-resizable>
          </th>
        )
      }
    },
-    /**
-     * 将父组件的columns进行处理：增加设置列按钮
-     */
-    setResultColumns () {
-      // 深度克隆，防止直接修改父组件数据
-      const columns = cloneDeep(this.columns)
-      // 设置按钮插槽配置
-      const settingOption = {
-        filterDropdown: 'settingDropdown',
-        filterIcon: 'settingIcon'
-      }
-      let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey))
-      // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列）
-      if (findActionIndex === -1) {
-        findActionIndex = columns.length - 1
-      }
-      if (columns[findActionIndex].scopedSlots instanceof Object) {
-        Object.assign(columns[findActionIndex].scopedSlots, settingOption)
-      } else {
-        columns[findActionIndex].scopedSlots = settingOption
-      }
-      // 最后过滤掉需要隐藏的字段,按定位进行排序
-      const startArr = [] // 冻结左侧的列
-      const midArr = [] // 没有冻结的列
-      const endArr = [] // 冻结右侧的列(只能是action，暂时不能自定义固定右侧)
-      columns.forEach(col => {
-        const key = getKey(col)
-        const fixed = this.settingColumnsObj.freeze.includes(key)
-        col.hide = this.settingColumnsObj.hide.includes(key)
-        col.fixed = key === actionKey ? 'right' : fixed
-        // 如果是字符串就转换成数字（因为实现拖拽，单位只能是px）
-        col.width = parseInt(col.width + '')
-        // 如果没有最小宽度就获取统一设置的最小宽度
-        col.minWidth = parseInt(col.minWidth + '') || this.columnMinWidth
-        if (!col.hide) {
-          // 如果没有宽度就取minWidth（不添加原数据的width属性，这里只对需要固定的minWidth生效）
-          const width = col.width || col.minWidth
-          switch (col.fixed) {
-            case true:
-            case 'left':
-              startArr.push({ ...col, width })
-              break
-            case 'right':
-              endArr.push({ ...col, width })
-              break
-            default:
-              midArr.push(col)
-          }
-        }
-      })
-      // 更新父组件的数据，将排序后的进行渲染
-      this.$emit('update:columns', columns)
-      this.resultColumns = [...startArr, ...midArr, ...endArr]
-    },
    /**
     * 配置表中复选框改变状态的事件
     * @param text 修改前的状态
@@ -322,15 +333,13 @@ export default {
      }
      this.saveSetting()
      /**
-       * 弹框消失问题 冻结列会导致dom结构改变而从局部更新丢失弹框
-       * 情况1：原本显示没有冻结列，新增第一个冻结列
-       * 情况2：原本有且只剩一个冻结列，取消最后一个冻结列
+       * 弹框消失问题 冻结列出现和消失会导致dom结构改变而从更新结构丢失弹框
       * 解决方案，刷新前获取dom，刷新后再次获取，如果获取不一致就触发点击事件点开弹框
       */
      const beforeIsFixed = !!this.$refs.table.$el.querySelector('.ant-table-fixed-left')
      this.$nextTick(() => {
        const afterIsFixed = !!this.$refs.table.$el.querySelector('.ant-table-fixed-left')
-        // console.log(beforeIsFixed, afterIsFixed)
+        // console.log(beforeIsFixed !== afterIsFixed)
        if (beforeIsFixed !== afterIsFixed) {
          this.$refs.settingBtn.$el.click()
        }
@@ -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()
    },
    // 清除当前表格缓存
@@ -8,12 +8,24 @@
      </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
@@ -24,6 +36,10 @@
          <a href="javascript:">Delete</a>
        </a-popconfirm>
        </span>
+
+        <template slot="footer" slot-scope="currentPageData">
+          Footer：{{ currentPageData }}
+        </template>
      </j-table>
    </div>

@@ -61,6 +77,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',
@@ -75,9 +105,13 @@ export default {
      },
      {
        title: 'Note',
-        dataIndex: 'note'
+        dataIndex: 'note',
        // 保留一列自适应
        // width: 100
+        // 建议：没有宽度的列至少一列禁止自定义（解决冻结或隐藏列导致出现空列）
+        // disabledHide: true,
+        // disabledFreeze: true,
+        hideSettingColumn: true
      },
      {
        title: 'Action',
@@ -90,6 +124,8 @@ export default {
    const dataSource = [
      {
        key: 0,
+        name: 'John Brown',
+        tags: ['nice', 'developer'],
        date: '2018-02-11',
        amount: 120,
        type: 'income',
@@ -97,6 +133,8 @@ export default {
      },
      {
        key: 1,
+        name: 'Jim Green',
+        tags: ['loser'],
        date: '2018-03-11',
        amount: 243,
        type: 'income',
@@ -104,6 +142,8 @@ export default {
      },
      {
        key: 2,
+        name: 'Joe Black',
+        tags: ['cool', 'teacher'],
        date: '2018-04-11',
        amount: 98,
        type: 'income',