update:更换设备管理页面的表格“选择”样式

main/manager-web/src/views/DeviceManagement.vue

@@ -18,14 +18,17 @@
             <el-table
               ref="deviceTable"
               :data="paginatedDeviceList"
-              @selection-change="handleSelectionChange"
               class="transparent-table"
               :header-cell-class-name="headerCellClassName"
               v-loading="loading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(255, 255, 255, 0.7)">
-              <el-table-column type="selection" align="center" width="120"></el-table-column>
+              <el-table-column label="选择" align="center" width="120">
+                <template slot-scope="scope">
+                  <el-checkbox v-model="scope.row.selected"></el-checkbox>
+                </template>
+              </el-table-column>
               <el-table-column label="设备型号" prop="model" align="center"></el-table-column>
               <el-table-column label="固件版本" prop="firmwareVersion" align="center" ></el-table-column>
               <el-table-column label="Mac地址" prop="macAddress" align="center"></el-table-column>
@@ -60,7 +63,7 @@
 
             <div class="table_bottom">
               <div class="ctrl_btn">
-                <el-button size="mini" type="primary" class="select-all-btn" @click="toggleAllSelection">
+                <el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">
                   {{ isAllSelected ? '取消全选' : '全选' }}
                 </el-button>
                 <el-button type="success" size="mini" class="add-device-btn" @click="handleAddDevice">
@@ -124,7 +127,6 @@ export default {
       deviceList: [],
       loading: false,
       userApi: null,
-
     };
   },
   computed: {
@@ -140,7 +142,10 @@ export default {
     paginatedDeviceList() {
       const start = (this.currentPage - 1) * this.pageSize;
       const end = start + this.pageSize;
-      return this.filteredDeviceList.slice(start, end);
+      return this.filteredDeviceList.slice(start, end).map(item => ({
+        ...item,
+        selected: false
+      }));
     },
     pageCount() {
       return Math.ceil(this.filteredDeviceList.length / this.pageSize);
@@ -177,15 +182,16 @@ export default {
       this.currentPage = 1;
     },
 
-    handleSelectionChange(val) {
+    handleSelectAll() {
-      this.selectedDevices = val;
+      this.isAllSelected = !this.isAllSelected;
-      this.isAllSelected = val.length === this.paginatedDeviceList.length;
+      this.paginatedDeviceList.forEach(row => {
-    },
+        row.selected = this.isAllSelected;
-    toggleAllSelection() {
+      });
-      this.$refs.deviceTable.toggleAllSelection();
+      this.selectedDevices = this.paginatedDeviceList.filter(device => device.selected);
     },
 
     deleteSelected() {
+      this.selectedDevices = this.paginatedDeviceList.filter(device => device.selected);
       if (this.selectedDevices.length === 0) {
         this.$message.warning({
           message: '请至少选择一条记录',
@@ -617,13 +623,7 @@ export default {
   display: none !important;
 }
 
-:deep(.custom-selection-header::after) {
+
-  content: "选择";
-  display: inline-block;
-  color: black;
-  font-weight: bold;
-  padding-bottom: 18px;
-}
 
 :deep(.el-table .el-button--text) {
   color: #7079aa;
@@ -660,4 +660,18 @@ export default {
     padding-bottom: 16px;
   }
 }
+
+:deep(.el-checkbox__inner) {
+  background-color: #eeeeee !important;
+  border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__inner:hover) {
+  border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #5f70f3 !important;
+  border-color: #5f70f3 !important;
+}
 </style>