资源监控策略

This commit is contained in:
康冉冉
2025-09-24 20:58:25 +08:00
parent 78fab1a2ca
commit 9782011cd2
8 changed files with 619 additions and 248 deletions

View File

@@ -10,7 +10,7 @@
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
</el-row>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange">
<!-- :selectable="() => config && config.selectable ? false : true" -->
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" :selectable="() => config && config.selectable ? false : true" align="center" />
<!-- 展开列内容 -->
@@ -113,8 +113,7 @@
ids: [],
selectList: [],
isProcessing: false, // 防止事件循环的标志位
checkColumns: [],
typeParent: false
checkColumns: []
}
},
// 监听showSearch的变化并且把变化后的值传给父组件
@@ -160,8 +159,6 @@
/** 多选框选中数据 */
handleSelectionChange(selection) {
if (this.typeParent) return
console.log('selection=====',selection);
if (this.config && this.config['tableKey']) {
this.selectList = [];
this.ids = [];
@@ -192,13 +189,24 @@
this.isProcessing = false;
});
this.selectList.forEach(val => {
this.$refs.selChangeList.toggleRowSelection(val,true);
this.$refs[`tableRef_${this.config.tableKey}`].toggleRowSelection(val,true);
});
} else {
this.selectList = selection;
this.ids = selection.map(item => item.id);
}
},
// 全选按钮操作
handleSelectAll(tabAll){
// 资源监控策略和资源监控模块使用 selectable: 控制列是否可选值为false则不可选--this.config.selectable为判断
if (this.config && this.config.tableKey && this.config.selectable === true) {
if (tabAll && tabAll.length > 0) {
this.defaultSelectRows([]); // 取消全选
} else {
this.selectAllRows(); // 全选
}
}
},
// 提供给父组件调用的方法:返回当前表格的选中数据 资源监控策略和资源监控模块使用
getSelectedData() {
return {
@@ -206,10 +214,9 @@
data: [...this.selectList] // 选中的数据
};
},
// 提供给父组件调用的方法:全选所有行
// 提供给父组件调用的方法:全选所有行 资源监控策略和资源监控模块使用
selectAllRows() {
this.typeParent = true;
const table = this.$refs[`tableRef_${this.config.tableKey}`];
const table = this.config && this.config.tableKey ? this.$refs[`tableRef_${this.config.tableKey}`] : this.$refs.selChangeList;
if (!table) return;
// 清空现有选中状态
this.selectList = [];
@@ -225,55 +232,13 @@
// }
});
},
// selectAllRows() {
// const table = this.$refs[`tableRef_${this.config.tableKey}`];
// if (!table) return;
//
// // 1. 筛选出所有可选的行根据selectable配置
// const selectableRows = this.tableList.filter(row => {
// // 如果有自定义选中规则,使用规则判断
// if (this.config?.selectable && typeof this.config.selectable === 'function') {
// return this.config.selectable(row);
// }
// // 默认全部可选
// return true;
// });
//
// // 2. 清空现有选中状态
// table.clearSelection(); // 使用表格内置方法清空,保证状态同步
// this.selectList = [];
// this.ids = [];
//
// // 3. 选中所有可选行
// selectableRows.forEach(row => {
// table.toggleRowSelection(row, true);
// this.selectList.push(row);
// this.ids.push(row.id);
// });
//
// // 4. 同步表格内部的全选状态(关键修复)
// this.$nextTick(() => {
// // 当所有可选行都被选中时,更新表格的全选状态
// if (selectableRows.length > 0 && this.selectList.length === selectableRows.length) {
// // 获取表头的全选复选框DOM
// const headerCheckbox = table.$el.querySelector('.el-table__header-wrapper .el-checkbox__input');
// if (headerCheckbox) {
// // 触发表格内部的状态更新(模拟用户点击全选框的行为)
// headerCheckbox.click();
// // 强制更新表格视图
// table.$forceUpdate();
// }
// }
// });
// },
// 提供给父组件调用的方法:默认选中值
defaultSelectRows(rows){
this.typeParent = true;
const tableInstance = this.$refs[`tableRef_${this.config.tableKey}`];
const tableInstance = this.config && this.config.tableKey ? this.$refs[`tableRef_${this.config.tableKey}`] : this.$refs.selChangeList;
this.selectList = [];
this.ids = [];
if (tableInstance) {
if (rows) {
if (rows && rows.length > 0) {
rows.forEach(row => {
tableInstance.toggleRowSelection(row, true);
this.selectList.push(row);