chore: optimize the code of StandardTable.vue; 🌟

src/components/table/StandardTable.vue

@@ -2,17 +2,14 @@
   <div class="standard-table">
     <div class="alert">
       <a-alert type="info" :show-icon="true">
-        <div slot="message">
+        <div class="message" slot="message">
-          已选择&nbsp;<a style="font-weight: 600">{{selectedRows.length}}</a>&nbsp;项&nbsp;&nbsp;
+          已选择&nbsp;<a>{{selectedRows.length}}</a>&nbsp;项 <a class="clear" @click="onClear">清空</a>
-          <div  v-for="(item, index) in needTotalList" :key="index">
+          <template  v-for="(item, index) in needTotalList" >
-            <div v-if="item.needTotal">
+            <div v-if="item.needTotal" :key="index">
               {{item.title}}总计&nbsp;
-              <a :key="index" style="font-weight: 600">
+              <a>{{item.customRender ? item.customRender(item.total) : item.total}}</a>
-                {{item.customRender ? item.customRender(item.total) : item.total}}
-              </a>&nbsp;&nbsp;
             </div>
-          </div>
+          </template>
-          <a style="margin-left: 24px">清空</a>
         </div>
       </a-alert>
     </div>
@@ -39,22 +36,12 @@ export default {
   data () {
     return {
       needTotalList: [],
-      selectedRowKeys: [],
       scopedSlots: []
     }
   },
   methods: {
     updateSelect (selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
+      this.$emit('update:selectedRows', selectedRows)
-      let list = this.needTotalList
-      this.needTotalList = list.map(item => {
-        return {
-          ...item,
-          total: selectedRows.reduce((sum, val) => {
-            return sum + val[item.dataIndex]
-          }, 0)
-        }
-      })
       this.$emit('change', selectedRowKeys, selectedRows)
     },
     initTotalList (columns) {
@@ -69,6 +56,10 @@ export default {
     getScopedSlots(columns) {
       return columns.filter(item => item.scopedSlots && item.scopedSlots.customRender)
         .map(item => item.scopedSlots.customRender)
+    },
+    onClear() {
+      this.updateSelect([], [])
+      this.$emit('clear')
     }
   },
   created () {
@@ -76,7 +67,7 @@ export default {
     this.needTotalList = this.initTotalList(this.columns)
   },
   watch: {
-    'selectedRows': function (selectedRows) {
+    selectedRows (selectedRows) {
       this.needTotalList = this.needTotalList.map(item => {
         return {
           ...item,
@@ -86,12 +77,27 @@ export default {
         }
       })
     }
+  },
+  computed: {
+    selectedRowKeys() {
+      return this.selectedRows.map(row => row.key)
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.standard-table{
   .alert{
     margin-bottom: 16px;
+    .message{
+      a{
+        font-weight: 600;
+      }
+    }
+    .clear{
+      float: right;
+    }
   }
+}
 </style>

src/pages/list/QueryList.vue

@@ -95,8 +95,8 @@
       <standard-table
         :columns="columns"
         :dataSource="dataSource"
-        :selectedRows="selectedRows"
+        :selectedRows.sync="selectedRows"
-        @change="onchange"
+        @clear="onClear"
       >
         <div slot="description" slot-scope="{text}">
           {{text}}
@@ -110,7 +110,7 @@
 </template>
 
 <script>
-import StandardTable from '../../components/table/StandardTable'
+import StandardTable from '@/components/table/StandardTable'
 const columns = [
   {
     title: '规则编号',
@@ -165,7 +165,6 @@ export default {
       advanced: true,
       columns: columns,
       dataSource: dataSource,
-      selectedRowKeys: [],
       selectedRows: []
     }
   },
@@ -173,13 +172,12 @@ export default {
     toggleAdvanced () {
       this.advanced = !this.advanced
     },
-    onchange (selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
-      this.selectedRows = selectedRows
-    },
     remove () {
-      this.dataSource = this.dataSource.filter(item => this.selectedRowKeys.indexOf(item.key) < 0)
+      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
-      this.selectedRows = this.selectedRows.filter(item => this.selectedRowKeys.indexOf(item.key) < 0)
+      this.selectedRows = []
+    },
+    onClear() {
+      this.$message.info('您清空了勾选的所有行')
     },
     addNew () {
       this.dataSource.unshift({