资源监控策略
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user