修改了各个页面的“选择”表头样式

This commit is contained in:
CGD
2025-04-15 20:33:09 +08:00
parent 4e885dac3e
commit b07edb977b
2 changed files with 58 additions and 77 deletions
+27 -23
View File
@@ -17,7 +17,11 @@
<el-card class="params-card" shadow="never">
<el-table ref="paramsTable" :data="paramsList" class="transparent-table"
:header-cell-class-name="headerCellClassName">
<el-table-column label="选择" 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="paramCode" align="center"></el-table-column>
<el-table-column label="参数值" prop="paramValue" align="center"
show-overflow-tooltip></el-table-column>
@@ -37,7 +41,7 @@
</el-button>
<el-button size="mini" type="success" @click="showAddDialog">新增</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete"
@click="deleteParam($refs.paramsTable.selection)">删除</el-button>
@click="deleteSelectedParams">删除</el-button>
</div>
<div class="custom-pagination">
<el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
@@ -142,12 +146,15 @@ export default {
},
({ data }) => {
if (data.code === 0) {
this.paramsList = data.data.list;
this.paramsList = data.data.list.map(item => ({
...item,
selected: false
}));
this.total = data.data.total;
} else {
this.$message.error({
message:data.msg || '获取参数列表失败',
showClose:true
message: data.msg || '获取参数列表失败',
showClose: true
});
}
}
@@ -158,12 +165,10 @@ export default {
this.fetchParams();
},
handleSelectAll() {
if (this.isAllSelected) {
this.$refs.paramsTable.clearSelection();
} else {
this.$refs.paramsTable.toggleAllSelection();
}
this.isAllSelected = !this.isAllSelected;
this.paramsList.forEach(row => {
row.selected = this.isAllSelected;
});
},
showAddDialog() {
this.dialogTitle = "新增参数";
@@ -207,6 +212,18 @@ export default {
});
}
},
deleteSelectedParams() {
const selectedRows = this.paramsList.filter(row => row.selected);
if (selectedRows.length === 0) {
this.$message.warning({
message: "请先选择需要删除的参数",
showClose: true
});
return;
}
this.deleteParam(selectedRows);
},
deleteParam(row) {
// 处理单个参数或参数数组
const params = Array.isArray(row) ? row : [row];
@@ -525,19 +542,6 @@ export default {
}
}
:deep(.custom-selection-header) {
.el-checkbox {
display: none !important;
}
&::after {
content: "选择";
display: inline-block;
color: black;
font-weight: bold;
padding-bottom: 18px;
}
}
:deep(.el-checkbox__inner) {
background-color: #eeeeee !important;
+31 -54
View File
@@ -15,9 +15,12 @@
<div class="content-panel">
<div class="content-area">
<el-card class="user-card" shadow="never">
<el-table ref="userTable" :data="userList" class="transparent-table"
:header-cell-class-name="headerCellClassName">
<el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
<el-table ref="userTable" :data="userList" class="transparent-table">
<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="用户Id" prop="userid" align="center"></el-table-column>
<el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
<el-table-column label="设备数量" prop="deviceCount" align="center"></el-table-column>
@@ -134,34 +137,35 @@ export default {
},
fetchUsers() {
Api.admin.getUserList(
{
page: this.currentPage,
limit: this.pageSize,
mobile: this.searchPhone,
},
({ data }) => {
if (data.code === 0) {
this.userList = data.data.list
this.total = data.data.total;
}
}
);
Api.admin.getUserList(
{
page: this.currentPage,
limit: this.pageSize,
mobile: this.searchPhone,
},
({ data }) => {
if (data.code === 0) {
this.userList = data.data.list.map(item => ({
...item,
selected: false
}));
this.total = data.data.total;
}
}
);
},
handleSearch() {
this.currentPage = 1;
this.fetchUsers();
},
handleSelectAll() {
if (this.isAllSelected) {
this.$refs.userTable.clearSelection();
} else {
this.$refs.userTable.toggleAllSelection();
}
this.isAllSelected = !this.isAllSelected;
this.isAllSelected = !this.isAllSelected;
this.userList.forEach(row => {
row.selected = this.isAllSelected;
});
},
batchDelete() {
const selectedUsers = this.$refs.userTable.selection;
const selectedUsers = this.userList.filter(user => user.selected);
if (selectedUsers.length === 0) {
this.$message.warning("请先选择需要删除的用户");
return;
@@ -226,20 +230,12 @@ export default {
});
},
batchEnable() {
const selectedUsers = this.$refs.userTable.selection;
if (selectedUsers.length === 0) {
this.$message.warning("请先选择需要启用的用户");
return;
}
this.handleChangeStatus(selectedUsers, 1);
const selectedUsers = this.userList.filter(user => user.selected);
this.handleChangeStatus(selectedUsers, 1);
},
batchDisable() {
const selectedUsers = this.$refs.userTable.selection;
if (selectedUsers.length === 0) {
this.$message.warning("请先选择需要禁用的用户");
return;
}
this.handleChangeStatus(selectedUsers, 0);
const selectedUsers = this.userList.filter(user => user.selected);
this.handleChangeStatus(selectedUsers, 0);
},
resetPassword(row) {
this.$confirm("重置后将会生成新密码,是否继续?", "提示", {
@@ -282,12 +278,6 @@ export default {
})
.catch(() => { });
},
headerCellClassName({ columnIndex }) {
if (columnIndex === 0) {
return "custom-selection-header";
}
return "";
},
goFirst() {
this.currentPage = 1;
this.fetchUsers();
@@ -602,19 +592,6 @@ export default {
color: #5a64b5 !important;
}
:deep(.custom-selection-header) {
.el-checkbox {
display: none !important;
}
&::after {
content: "选择";
display: inline-block;
color: black;
font-weight: bold;
padding-bottom: 18px;
}
}
:deep(.el-checkbox__inner) {
background-color: #eeeeee !important;