el-table 的selection-change怎么设置在第一次加载时候不执行此方法,点击多选框的时候才执行
时间: 2024-09-24 17:11:59 浏览: 233
`el-table` 是 Element UI 提供的一个表格组件,其中的 `selection-change` 事件是在用户选择或多选表格行后触发的,用于处理用户选中行的操作。如果你想让这个事件只在用户首次手动选择行时执行,而不是在数据初次加载时自动触发,你可以采用以下策略:
1. 设置默认选中状态:在表格的初始化时,设置 `rowSelection` 的 `selectedRows` 为空数组,表示没有默认选中项。
```js
data() {
return {
tableData: [...], // 数据源
rowSelection: { selectedRows: [] }, // 空数组作为默认
};
},
```
2. 监听 `selection-change` 事件:在模板中绑定该事件,并添加一个布尔型变量 `firstLoad` 来判断是否为首次加载后的操作。如果 `firstLoad` 为真,则执行相应的逻辑,之后将它置为 false。
```html
<template>
<el-table :data="tableData" :row-selection="rowSelection">
<!-- ... -->
<el-table-column type="selection" /> <!-- 多选列 -->
<template slot-scope="scope">
<!-- ... -->
<template v-if="!firstLoad">
<input type="checkbox"
@change="handleSelectionChange(scope.$index, scope.row)" />
</template>
</template>
<!-- 添加一个按钮或者某个操作前,检查 firstLoad 并决定是否执行 -->
<button @click="checkFirstLoadBeforeAction">执行操作</button>
</el-table>
</template>
<script>
export default {
methods: {
handleSelectionChange(index, row) {
if (!this.firstLoad) {
this.firstLoad = true; // 防止再次立即触发
// 执行你的选择改变逻辑
console.log(`选择了第${index}行: ${row}`);
}
},
checkFirstLoadBeforeAction() {
if (this.firstLoad) {
// 这里可以执行你的操作
// ...
}
},
},
};
</script>
```
现在,`selection-change` 只会在用户点击多选框后执行,而首次加载时不会触发。在需要执行操作之前,你可以通过 `checkFirstLoadBeforeAction` 函数检查 `firstLoad` 是否为真。
阅读全文