订单列表选中时突出背景色

backendEle/src/views/shop/order-list.vue

@@ -4,7 +4,8 @@
       <div class="filter-box">
         <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
       </div>
-      <el-table class="table-box" ref="multipleTable" :data="tableData" stripe style="width: 100%;"
+      <el-table ref="multipleTable" :data="tableData" style="width: 100%;"
+                :row-class-name="rowClassName"
                 @selection-change="handleSelectionChange"
                 :height="tool.getTableHeight()">
         <el-table-column type="selection" width="70" v-if="tableHeaders"></el-table-column>
@@ -58,132 +59,148 @@
 </template>
 
 <script>
-  import network from '@/utils/network'
-  import tool from '@/utils/tool'
-  import baseInfo from '@/utils/baseInfo'
-  import FilterUser from '@/components/FilterUser'
-  import permission from '@/utils/permission'
-  import Pagination from '@/components/Pagination'
-  import filterHelper from '@/utils/filterHelper'
+import network from '@/utils/network'
+import tool from '@/utils/tool'
+import baseInfo from '@/utils/baseInfo'
+import FilterUser from '@/components/FilterUser'
+import permission from '@/utils/permission'
+import Pagination from '@/components/Pagination'
+import filterHelper from '@/utils/filterHelper'
 
-  export default {
-    name: 'shop_order-list',
-    components: {FilterUser, Pagination},
-    mounted() {
-      this.getData()
-    },
-    data() {
-      return {
-        tableHeaders: null,
-        tableData: null,
-        tableHeight: window.innerHeight - 310,
-        loading: true,
-        multipleSelection: [],
-        currentPage: 1,
-        totalPages: 1,
-        totalCount: 1,
-        pageSize: 20,
-        tool: tool,
-        permission: permission,
-        filterTypes: null,
-        filterModel: {},
-        dialogDeliveryVisible: false,
-        deliveryForm: {
-          sn: '',
-          expressCompany: '',
-          orderTrackNo: '',
-        },
+export default {
+  name: 'shop_order-list',
+  components: {FilterUser, Pagination},
+  mounted () {
+    this.getData()
+  },
+  data () {
+    return {
+      tableHeaders: null,
+      tableData: null,
+      tableHeight: window.innerHeight - 310,
+      loading: true,
+      multipleSelection: [],
+      currentPage: 1,
+      totalPages: 1,
+      totalCount: 1,
+      pageSize: 20,
+      tool: tool,
+      permission: permission,
+      filterTypes: null,
+      filterModel: {},
+      dialogDeliveryVisible: false,
+      deliveryForm: {
+        sn: '',
+        expressCompany: '',
+        orderTrackNo: '',
+      },
+    }
+  },
+  methods: {
+    rowClassName (val) {
+      if (val.row) {
+        let index = this.multipleSelection.findIndex(item => {
+          return item.ID == val.row.ID
+        })
+        if (index >= 0) {
+          return 'selected-row'
+        }
+      } else {
+        return ''
       }
     },
-    methods: {
-      handleSelectionChange(val) {
-        this.multipleSelection = val
-      },
-      handleCurrentChange(page) {
-        this.getData(page, this.pageSize)
-      },
-      handleSizeChange(pageSize) {
-        this.getData(this.currentPage, pageSize)
-      },
-      handleFilterUser(filterData) {
-        filterHelper.handleFilterUser(this, filterData)
-      },
-      getData(page, pageSize) {
-        let filterData = this.filterModel
-        network.getPageData(this, 'shop/order-list', page, pageSize, filterData, response => {
-          this.filterTypes = response.filterTypes
-          this.allData = response
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+      this.rowClassName(val)
+    },
+    handleCurrentChange (page) {
+      this.getData(page, this.pageSize)
+    },
+    handleSizeChange (pageSize) {
+      this.getData(this.currentPage, pageSize)
+    },
+    handleFilterUser (filterData) {
+      filterHelper.handleFilterUser(this, filterData)
+    },
+    getData (page, pageSize) {
+      let filterData = this.filterModel
+      network.getPageData(this, 'shop/order-list', page, pageSize, filterData, response => {
+        this.filterTypes = response.filterTypes
+        this.allData = response
+      })
+    },
+    handleExport () {
+      this.$confirm(`确定要导出当前数据吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return network.getData(`shop/order-list-export`, this.filterModel)
+      }).then(response => {
+        this.$message({
+          message: response,
+          type: 'success'
         })
-      },
-      handleExport(){
-        this.$confirm(`确定要导出当前数据吗？`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          return network.getData(`shop/order-list-export`, this.filterModel)
-        }).then(response => {
+      }).catch(response => {
+
+      })
+    },
+    handleEdit () {
+      // 进入修改订单页面
+    },
+    handleDel (row) {
+      let orderSn = row.SN.value // order订单表的编号
+      this.$confirm(`确定要删除订单：${orderSn}吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 删除订单
+        let postData = {
+          orderSn
+        }
+        return network.postData('shop/delete-order', postData).then(response => {
           this.$message({
             message: response,
             type: 'success'
           })
-        }).catch(response => {
-
+          this.submitButtonStat = false
+          this.$router.go(-1)
+        }).catch(() => {
+          this.submitButtonStat = false
         })
-      },
-      handleEdit() {
-        // 进入修改订单页面
-      },
-      handleDel(row) {
-        let orderSn = row.SN.value // order订单表的编号
-        this.$confirm(`确定要删除订单：${orderSn}吗？`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          // 删除订单
-          let postData = {
-            orderSn
-          }
-          return network.postData('shop/delete-order', postData).then(response => {
-              console.log(response);
-              this.$message({
-                  message: response,
-                  type: 'success'
-              })
-              this.submitButtonStat = false
-              this.$router.go(-1)
-          }).catch(() => {
-              this.submitButtonStat = false
-          })
-        }).then(response => {
-          
-        }).catch(response => {
+      }).then(response => {
 
+      }).catch(response => {
+
+      })
+    },
+    // 显示发货对话框
+    handleShowDeliveryDialog (row) {
+      this.dialogDeliveryVisible = true
+      this.deliveryForm.sn = row['SN'].value
+    },
+    // 发货
+    handleDelivery () {
+      network.postData('shop/order-delivery', this.deliveryForm).then(response => {
+        this.$message({
+          message: response,
+          type: 'success'
         })
-      },
-      // 显示发货对话框
-      handleShowDeliveryDialog(row) {
-        this.dialogDeliveryVisible = true
-        this.deliveryForm.sn = row['SN'].value
-      },
-      // 发货
-      handleDelivery() {
-        network.postData('shop/order-delivery', this.deliveryForm).then(response => {
-          this.$message({
-            message: response,
-            type: 'success'
-          })
-          this.dialogDeliveryVisible = false
-          this.getData(this.currentPage, this.pageSize)
-        }).catch(response => {
-          this.dialogDeliveryVisible = false
-        })
-      }
+        this.dialogDeliveryVisible = false
+        this.getData(this.currentPage, this.pageSize)
+      }).catch(response => {
+        this.dialogDeliveryVisible = false
+      })
     }
   }
+}
 
 </script>
 
 <style scoped>
+/deep/.el-table .selected-row {
+  background: #bce5ef;
+  /*color: white;*/
+}
 </style>