fix: table rowSelection false;

add: table alert example

Author: sendya

src/components/table/index.js

@@ -249,22 +249,26 @@ export default {
         props[k] = this[localKey]
         return props[k]
       }
-      if (showAlert && k === 'rowSelection') {
-        // 重新绑定 rowSelection 事件
-        props[k] = {
-          selectedRows: this.selectedRows,
-          selectedRowKeys: this.selectedRowKeys,
-          onChange: (selectedRowKeys, selectedRows) => {
-            this.updateSelect(selectedRowKeys, selectedRows)
-            typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
+      if (k === 'rowSelection') {
+        if (showAlert && this.rowSelection) {
+          // 重新绑定 rowSelection 事件
+          props[k] = {
+            selectedRows: this.selectedRows,
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+              this.updateSelect(selectedRowKeys, selectedRows)
+              typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
+            }
           }
+          return props[k]
         }
+        // 如果没打算开启 rowSelection 则清空默认的选择项
+        props[k] = null
         return props[k]
       }
       props[k] = this[k]
       return props[k]
     })
-
     const table = (
       <a-table {...{ props, scopedSlots: { ...this.$scopedSlots } }} onChange={this.loadData}>
         {this.$slots.default}

src/views/list/TableList.vue

@@ -75,14 +75,20 @@
       </a-dropdown>
     </div>
 
+    <div>
+      <a-button @click="tableOption(false)" v-if="optionAlertShow">关闭 alert</a-button>
+    </div>
     <s-table
       ref="table"
       size="default"
       :columns="columns"
       :data="loadData"
-      :alert="{ show: true, clear: () => { this.selectedRowKeys = [] } }"
-      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
     >
+      <span slot="serial" slot-scope="text, record, index">
+        {{ index + 1 }}
+      </span>
       <span slot="action" slot-scope="text, record">
         <template v-if="$auth('table.update')">
           <a @click="handleEdit(record)">编辑</a>
@@ -215,6 +221,10 @@ export default {
       queryParam: {},
       // 表头
       columns: [
+        {
+          title: '#',
+          scopedSlots: { customRender: 'serial' }
+        },
         {
           title: '规则编号',
           dataIndex: 'no'
@@ -254,15 +264,44 @@ export default {
             return res.result
           })
       },
-
       selectedRowKeys: [],
-      selectedRows: []
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      },
+      optionAlertShow: true
     }
   },
   created () {
+    this.tableOption(true)
     getRoleList({ t: new Date() })
   },
   methods: {
+
+    tableOption (bool) {
+      if (bool) {
+        this.options = {
+          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange
+          }
+        }
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null
+        }
+        this.optionAlertShow = false
+      }
+    },
+
     handleEdit (record) {
       this.mdl = Object.assign({}, record)
       console.log(this.mdl)