在一个弹窗有一个element ui多选表格,弹窗关闭按钮是禁用状态,当触发了表格多选功能的时候,弹窗关闭按钮变成可用状态
时间: 2024-02-18 07:59:04 浏览: 109
在 Element UI 的多选表格中,可以使用 `selection-change` 事件来监听选择变化。每次选择变化时,该事件会触发并传递当前已选择的行数据与所有已选择行数据的数组。可以在事件回调函数中根据已选择行数据的长度来控制弹窗关闭按钮的可用状态。
示例代码如下:
```html
<template>
<div>
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false">
<el-table
:data="tableData"
:selectable="multiple"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="age"
label="Age">
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button
:disabled="!isCloseButtonEnabled"
@click="dialogVisible = false">
关闭
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Mary', age: 25 },
{ id: 3, name: 'Bob', age: 30 }
],
multiple: true, // 开启多选模式
selectedRows: [] // 已选择的行数据
};
},
computed: {
isCloseButtonEnabled() {
return this.selectedRows.length > 0;
}
},
methods: {
handleSelectionChange(rows) {
this.selectedRows = rows;
}
}
};
</script>
```
在上面的代码中,`isCloseButtonEnabled` 计算属性根据已选择行数据的长度来判断弹窗关闭按钮是否可用。当已选择行数据的长度大于 0 时,弹窗关闭按钮变为可用状态,否则为禁用状态。同时,`handleSelectionChange` 方法中更新已选择行数据的状态。在模板中,根据 `isCloseButtonEnabled` 计算属性来动态绑定关闭按钮的 `disabled` 属性,从而实现弹窗关闭按钮的可用状态与已选择行数据的状态同步更新的功能。
阅读全文