refactor: s-table

src/components/table/README.md

@@ -1,293 +1,320 @@
-Table 重封装组件说明
-====
-
-
-封装说明
-----
-
->  基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。
->
-> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
-
-该 `table` 由 [@AraragiTsukihiz](https://github.com/araragitsukihiz) 完成封装
-
-
-例子1
-----
-（基础使用）
-
-```vue
-
-<template>
-  <s-table
-    ref="table"
-    :rowKey="(record) => record.data.id"
-    size="default"
-    :columns="columns"
-    :data="loadData"
-  >
-  </s-table>
-</template>
-
-<script>
-  import STable from '@/components/table/'
-
-  export default {
-    components: {
-      STable
-    },
-    data() {
-      return {
-        columns: [
-          {
-            title: '规则编号',
-            dataIndex: 'no'
-          },
-          {
-            title: '描述',
-            dataIndex: 'description'
-          },
-          {
-            title: '服务调用次数',
-            dataIndex: 'callNo',
-            sorter: true,
-            needTotal: true,
-            customRender: (text) => text + ' 次'
-          },
-          {
-            title: '状态',
-            dataIndex: 'status',
-            needTotal: true
-          },
-          {
-            title: '更新时间',
-            dataIndex: 'updatedAt',
-            sorter: true
-          }
-        ],
-        // 查询条件参数
-        queryParam: {},
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          return this.$http.get('/service', {
-            params: Object.assign(parameter, this.queryParam)
-          }).then(res => {
-            return res.result
-          })
-        },
-      }
-    }
-  }
-</script>
-
-```
-
-
-
-例子2
-----
-
-（简单的表格，最后一列是各种操作）
-
-```vue
-<template>
-  <s-table
-    ref="table"
-    size="default"
-    :columns="columns"
-    :data="loadData"
-  >
-    <span slot="action" slot-scope="text, record">
-      <a>编辑</a>
-      <a-divider type="vertical"/>
-      <a-dropdown>
-        <a class="ant-dropdown-link">
-          更多 <a-icon type="down"/>
-        </a>
-        <a-menu slot="overlay">
-          <a-menu-item>
-            <a href="javascript:;">1st menu item</a>
-          </a-menu-item>
-          <a-menu-item>
-            <a href="javascript:;">2nd menu item</a>
-          </a-menu-item>
-          <a-menu-item>
-            <a href="javascript:;">3rd menu item</a>
-          </a-menu-item>
-        </a-menu>
-      </a-dropdown>
-    </span>
-  </s-table>
-</template>
-
-<script>
-  import STable from '@/components/table/'
-
-  export default {
-    components: {
-      STable
-    },
-    data() {
-      return {
-        columns: [
-          {
-            title: '规则编号',
-            dataIndex: 'no'
-          },
-          {
-            title: '描述',
-            dataIndex: 'description'
-          },
-          {
-            title: '服务调用次数',
-            dataIndex: 'callNo',
-          },
-          {
-            title: '状态',
-            dataIndex: 'status',
-          },
-          {
-            title: '更新时间',
-            dataIndex: 'updatedAt',
-          },
-          {
-            table: '操作',
-            dataIndex: 'action',
-            scopedSlots: {customRender: 'action'},
-          }
-        ],
-        // 查询条件参数
-        queryParam: {},
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          return this.$http.get('/service', {
-            params: Object.assign(parameter, this.queryParam)
-          }).then(res => {
-            return res.result
-          })
-        },
-      }
-    },
-    methods: {
-      edit(row) {
-        // axios 发送数据到后端 修改数据成功后
-        // 调用 refresh() 重新加载列表数据
-        // 这里 setTimeout 模拟发起请求的网络延迟..
-        setTimeout(() => {
-          this.$refs.table.refresh()
-        }, 1500)
-
-      }
-    }
-  }
-</script>
-```
-
-
-
-内置方法
-----
-
-通过 `this.$refs.table` 调用
-
-`this.$refs.table.refresh()` 刷新列表 (用户新增/修改数据后，重载列表数据)
-
-> 注意：要调用 `refresh()` 需要给表格组件设定 `ref` 值
-
-
-
-注意事项
-----
-
-> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
-(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
-
-修改 `@/components/table/index.js`  第 106 行起
-
-
-
-```javascript
-result.then(r => {
-  this.localPagination = Object.assign({}, this.localPagination, {
-    current: r.pageNo,  // 返回结果中的当前分页数
-    total: r.totalCount, // 返回结果中的总记录数
-    showSizeChanger: this.showSizeChanger,
-    pageSize: (pagination && pagination.pageSize) ||
-      this.localPagination.pageSize
-  });
-
-  !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
-  this.localDataSource = r.data; // 返回结果中的数组数据
-  this.localLoading = false
-});
-```
-返回 JSON 例子：
-```json
-{
-  "message": "",
-  "result": {
-    "data": [{
-        id: 1,
-        cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
-        title: 'Alipay',
-        description: '那是一种内在的东西， 他们到达不了，也无法触及的',
-        status: 1,
-        updatedAt: '2018-07-26 00:00:00'
-      },
-      {
-        id: 2,
-        cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
-        title: 'Angular',
-        description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
-        status: 1,
-        updatedAt: '2018-07-26 00:00:00'
-      },
-      {
-        id: 3,
-        cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
-        title: 'Ant Design',
-        description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
-        status: 1,
-        updatedAt: '2018-07-26 00:00:00'
-      },
-      {
-        id: 4,
-        cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
-        title: 'Ant Design Pro',
-        description: '那时候我只会想自己想要什么，从不想自己拥有什么',
-        status: 1,
-        updatedAt: '2018-07-26 00:00:00'
-      },
-      {
-        id: 5,
-        cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
-        title: 'Bootstrap',
-        description: '凛冬将至',
-        status: 1,
-        updatedAt: '2018-07-26 00:00:00'
-      },
-      {
-        id: 6,
-        cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
-        title: 'Vue',
-        description: '生命就像一盒巧克力，结果往往出人意料',
-        status: 1,
-        updatedAt: '2018-07-26 00:00:00'
-      }
-    ],
-    "pageSize": 10,
-    "pageNo": 0,
-    "totalPage": 6,
-    "totalCount": 57
-  },
-  "status": 200,
-  "timestamp": 1534955098193
-}
-```
-
-
-
-更新时间
-----
-
+Table 重封装组件说明
+====
+
+
+封装说明
+----
+
+>  基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。
+>
+> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
+
+该 `table` 由 [@AraragiTsukihiz](https://github.com/araragitsukihiz) 完成封装
+
+
+例子1
+----
+（基础使用）
+
+```vue
+
+<template>
+  <s-table
+    ref="table"
+    size="default"
+    :rowKey="(record) => record.data.id"
+    :columns="columns"
+    :data="loadData"
+    :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+  >
+  </s-table>
+</template>
+
+<script>
+  import STable from '@/components/table/'
+
+  export default {
+    components: {
+      STable
+    },
+    data() {
+      return {
+        columns: [
+          {
+            title: '规则编号',
+            dataIndex: 'no'
+          },
+          {
+            title: '描述',
+            dataIndex: 'description'
+          },
+          {
+            title: '服务调用次数',
+            dataIndex: 'callNo',
+            sorter: true,
+            needTotal: true,
+            customRender: (text) => text + ' 次'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            needTotal: true
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'updatedAt',
+            sorter: true
+          }
+        ],
+        // 查询条件参数
+        queryParam: {},
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return this.$http.get('/service', {
+            params: Object.assign(parameter, this.queryParam)
+          }).then(res => {
+            return res.result
+          })
+        },
+        selectedRowKeys: [],
+        selectedRows: []
+      }
+    },
+    methods: {
+      onSelectChange (selectedRowKeys, selectedRows) {
+         this.selectedRowKeys = selectedRowKeys
+         this.selectedRows = selectedRows
+       }
+    }
+  }
+</script>
+
+```
+
+
+
+例子2
+----
+
+（简单的表格，最后一列是各种操作）
+
+```vue
+<template>
+  <s-table
+    ref="table"
+    size="default"
+    :columns="columns"
+    :data="loadData"
+  >
+    <span slot="action" slot-scope="text, record">
+      <a>编辑</a>
+      <a-divider type="vertical"/>
+      <a-dropdown>
+        <a class="ant-dropdown-link">
+          更多 <a-icon type="down"/>
+        </a>
+        <a-menu slot="overlay">
+          <a-menu-item>
+            <a href="javascript:;">1st menu item</a>
+          </a-menu-item>
+          <a-menu-item>
+            <a href="javascript:;">2nd menu item</a>
+          </a-menu-item>
+          <a-menu-item>
+            <a href="javascript:;">3rd menu item</a>
+          </a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    </span>
+  </s-table>
+</template>
+
+<script>
+  import STable from '@/components/table/'
+
+  export default {
+    components: {
+      STable
+    },
+    data() {
+      return {
+        columns: [
+          {
+            title: '规则编号',
+            dataIndex: 'no'
+          },
+          {
+            title: '描述',
+            dataIndex: 'description'
+          },
+          {
+            title: '服务调用次数',
+            dataIndex: 'callNo',
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'updatedAt',
+          },
+          {
+            table: '操作',
+            dataIndex: 'action',
+            scopedSlots: {customRender: 'action'},
+          }
+        ],
+        // 查询条件参数
+        queryParam: {},
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return this.$http.get('/service', {
+            params: Object.assign(parameter, this.queryParam)
+          }).then(res => {
+            return res.result
+          })
+        },
+      }
+    },
+    methods: {
+      edit(row) {
+        // axios 发送数据到后端 修改数据成功后
+        // 调用 refresh() 重新加载列表数据
+        // 这里 setTimeout 模拟发起请求的网络延迟..
+        setTimeout(() => {
+          this.$refs.table.refresh()
+        }, 1500)
+
+      }
+    }
+  }
+</script>
+```
+
+
+
+内置方法
+----
+
+通过 `this.$refs.table` 调用
+
+`this.$refs.table.refresh()` 刷新列表 (用户新增/修改数据后，重载列表数据)
+
+> 注意：要调用 `refresh()` 需要给表格组件设定 `ref` 值
+
+
+内置属性
+----
+> 除去 `a-table` 自带属性外，还而外提供了 `alert` `props` 属性
+```javascript
+alert: {
+  show: Boolean, 
+  clear: [Function, Boolean]
+}
+```
+
+注意事项
+----
+
+> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
+(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
+
+修改 `@/components/table/index.js`  第 124 行起
+
+
+
+```javascript
+result.then(r => {
+  this.localPagination = Object.assign({}, this.localPagination, {
+    current: r.pageNo,  // 返回结果中的当前分页数
+    total: r.totalCount, // 返回结果中的总记录数
+    showSizeChanger: this.showSizeChanger,
+    pageSize: (pagination && pagination.pageSize) ||
+      this.localPagination.pageSize
+  })
+
+  // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
+  if (r.data.length == 0 && this.localPagination.current != 1) {
+    this.localPagination.current--
+    this.loadData()
+    return
+  }
+
+  // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
+  // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
+  !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
+  this.localDataSource = r.data // 返回结果中的数组数据
+  this.localLoading = false
+});
+```
+返回 JSON 例子：
+```json
+{
+  "message": "",
+  "result": {
+    "data": [{
+        id: 1,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+        title: 'Alipay',
+        description: '那是一种内在的东西， 他们到达不了，也无法触及的',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 2,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+        title: 'Angular',
+        description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 3,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
+        title: 'Ant Design',
+        description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 4,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
+        title: 'Ant Design Pro',
+        description: '那时候我只会想自己想要什么，从不想自己拥有什么',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 5,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
+        title: 'Bootstrap',
+        description: '凛冬将至',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 6,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
+        title: 'Vue',
+        description: '生命就像一盒巧克力，结果往往出人意料',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      }
+    ],
+    "pageSize": 10,
+    "pageNo": 0,
+    "totalPage": 6,
+    "totalCount": 57
+  },
+  "status": 200,
+  "timestamp": 1534955098193
+}
+```
+
+
+
+更新时间
+----
+
 该文档最后更新于： 2018-10-31 PM 08:15

src/components/table/index.js

@@ -1,5 +1,6 @@
 import T from 'ant-design-vue/es/table/Table'
 import get from 'lodash.get'
+
 export default {
   data() {
     return {
@@ -38,8 +39,14 @@ export default {
       type: String,
       default: 'default'
     },
+    /**
+     * {
+     *   show: true,
+     *   clear: Function
+     * }
+     */
     alert: {
-      type: Object,
+      type: [Object, Boolean],
       default: null
     },
     /** @Deprecated */
@@ -57,7 +64,7 @@ export default {
         name: this.$route.name,
         params: Object.assign({}, this.$route.params, {
           pageNo: val
-        }),
+        })
       })
     },
     pageNum(val) {
@@ -66,13 +73,11 @@ export default {
       })
     },
     pageSize(val) {
-      console.log('pageSize:', val)
       Object.assign(this.localPagination, {
         pageSize: val
       })
     },
     showSizeChanger(val) {
-      console.log('showSizeChanger', val)
       Object.assign(this.localPagination, {
         showSizeChanger: val
       })
@@ -112,7 +117,7 @@ export default {
         )
       )
 
-      // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data 
+      // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
       if (result instanceof Promise) {
         result.then(r => {
           this.localPagination = Object.assign({}, this.localPagination, {
@@ -122,7 +127,7 @@ export default {
             pageSize: (pagination && pagination.pageSize) ||
               this.localPagination.pageSize
           })
-          
+
           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
           if (r.data.length == 0 && this.localPagination.current != 1) {
             this.localPagination.current--
@@ -130,7 +135,7 @@ export default {
             return
           }
 
-          // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false 
+          // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
           // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
           !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
           this.localDataSource = r.data // 返回结果中的数组数据
@@ -142,15 +147,20 @@ export default {
       const totalList = []
       columns && columns instanceof Array && columns.forEach(column => {
         if (column.needTotal) {
-          totalList.push({ ...column,
+          totalList.push({
+            ...column,
             total: 0
           })
         }
       })
       return totalList
     },
+    /**
+     * 用于更新已选中的列表数据 total 统计
+     * @param selectedRowKeys
+     * @param selectedRows
+     */
     updateSelect(selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
       const list = this.needTotalList
       this.needTotalList = list.map(item => {
@@ -162,123 +172,91 @@ export default {
           }, 0)
         }
       })
-      // this.$emit('change', selectedRowKeys, selectedRows)
-    },
-    updateEdit() {
-      this.selectedRows = []
     },
-    onClearSelected() {
-      this.selectedRowKeys = []
-      this.updateSelect([], [])
+    /**
+     * 清空 table 已选中项
+     */
+    clearSelected () {
+      if (this.rowSelection) {
+        this.rowSelection.onChange([], [])
+        this.updateSelect([], [])
+      }
     },
-    renderMsg(h) {
-      const _vm = this
-      const d = []
-      // 构建 已选择
-      d.push(
-        h('span', {
-          style: {
-            marginRight: '12px'
-          }
-        }, ['已选择 ', h('a', {
-          style: {
-            fontWeight: 600
-          }
-        }, this.selectedRows.length)])
+    /**
+     * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
+     * @param callback
+     * @returns {*}
+     */
+    renderClear (callback) {
+      return (
+        <a style="margin-left: 24px" onClick={() => {
+          callback()
+          this.clearSelected()
+        }}>清空</a>
       )
-
-      // 构建 列统计
-      this.needTotalList.map(item => {
-        d.push(h('span', {
-            style: {
-              marginRight: '12px'
-            }
-          },
-          [
-            `${ item.title }总计 `,
-            h('a', {
-              style: {
-                fontWeight: 600
-              }
-            }, `${ !item.customRender ? item.total : item.customRender(item.total) }`)
-          ]))
+    },
+    renderAlert () {
+      // 绘制统计列数据
+      const needTotalItems = this.needTotalList.map((item) => {
+        return (<span style="margin-right: 12px">
+          {item.title}总计 <a style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
+        </span>)
       })
 
-      // 构建 清空选择
-      d.push(h('a', {
-        style: {
-          marginLeft: '24px'
-        },
-        on: {
-          click: _vm.onClearSelected
-        }
-      }, '清空'))
+      // 绘制 清空 按钮
+      const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? (
+        this.renderClear(this.clearSelected)
+      ) : (this.alert !== null && typeof this.alert.clear === 'function') ? (
+        this.renderClear(this.alert.clear)
+      ) : null
 
-      return d
-    },
-    renderAlert(h) {
-      return h('span', {
-        slot: 'message'
-      }, this.renderMsg(h))
-    },
+      // 绘制 alert 组件
+      return (
+        <a-alert showIcon={true} style="margin-bottom: 16px">
+          <template slot="message">
+            <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
+            {needTotalItems}
+            {clearItem}
+          </template>
+        </a-alert>
+      )
+    }
   },
 
-  render(h) {
-    const _vm = this
-
-    const props = {},
-      localKeys = Object.keys(this.$data)
+  render() {
+    const props = {}
+    const localKeys = Object.keys(this.$data)
+    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) || this.alert
 
     Object.keys(T.props).forEach(k => {
-      const localKey = `local${k.substring(0,1).toUpperCase()}${k.substring(1)}`
+      const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
       if (localKeys.includes(localKey)) {
-        return props[k] = _vm[localKey]
+        return props[k] = this[localKey]
       }
-      return props[k] = _vm[k]
-    })
-
-
-    // 显示信息提示
-    if (this.showAlertInfo) {
-
-      props.rowSelection = {
-        selectedRowKeys: this.selectedRowKeys,
-        onChange: (selectedRowKeys, selectedRows) => {
-          _vm.updateSelect(selectedRowKeys, selectedRows)
-          _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
+      if (showAlert && k === 'rowSelection') {
+        // 重新绑定 rowSelection 事件
+        return props[k] = {
+          selectedRowKeys: this[k].selectedRowKeys,
+          onChange: (selectedRowKeys, selectedRows) => {
+            this.updateSelect(selectedRowKeys, selectedRows)
+            this[k].onChange(selectedRowKeys, selectedRows)
+          }
         }
       }
+      return props[k] = this[k]
+    })
 
-      return h('div', {}, [
-        h('a-alert', {
-          style: {
-            marginBottom: '16px'
-          },
-          props: {
-            type: 'info',
-            showIcon: true
-          }
-        }, [_vm.renderAlert(h)]),
-        h('a-table', {
-          tag: 'component',
-          attrs: props,
-          on: {
-            change: _vm.loadData
-          },
-          scopedSlots: this.$scopedSlots
-        }, this.$slots.default)
-      ])
-
-    }
-
-    return h('a-table', {
-      tag: 'component',
-      attrs: props,
-      on: {
-        change: _vm.loadData
-      },
-      scopedSlots: this.$scopedSlots
-    }, this.$slots.default)
+    const table = (
+      <a-table {...{ props, scopedSlots: {...this.$scopedSlots}}} onChange={this.loadData}>
+        {this.$slots.default}
+      </a-table>
+    )
 
+    return (
+      <div class="table-wrapper">
+        { showAlert ? this.renderAlert() : null }
+        { table }
+      </div>
+    )
   }
 }

src/views/list/TableList.vue

@@ -80,8 +80,8 @@
       size="default"
       :columns="columns"
       :data="loadData"
-      :showAlertInfo="true"
-      @onSelect="onChange"
+      :alert="{ show: true, clear: () => { this.selectedRowKeys = [] } }"
+      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
     >
       <span slot="action" slot-scope="text, record">
         <template v-if="$auth('table.update')">
@@ -271,11 +271,10 @@
       handleOk () {
 
       },
-      onChange (row) {
-        this.selectedRowKeys = row.selectedRowKeys
-        this.selectedRows = row.selectedRows
 
-        console.log(this.$refs.table)
+      onSelectChange (selectedRowKeys, selectedRows) {
+        this.selectedRowKeys = selectedRowKeys
+        this.selectedRows = selectedRows
       },
       toggleAdvanced () {
         this.advanced = !this.advanced