ElementUI 的Table组件判断当前是勾选状态还是取消勾选状态

博客内容主要提及判断当前表格勾选是选中还是取消选中的问题,还给出了参考链接https://blog.youkuaiyun.com/qq_27840695/article/details/84029987 。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

判断当前表格勾选的是选中的还是取消选中的 

<el-table  @select = "onTableSelect"></el-table>


onTableSelect(rows, row) {
    let selected = rows.length && rows.indexOf(row) !== -1
}
如果selected为true表示勾选,为false或者0表示取消勾选

转自:https://blog.youkuaiyun.com/qq_27840695/article/details/84029987

### 实现多级表头的选择功能 为了在 `ElementUI` 的 `el-table` 组件中实现多级表头的选择功能,可以采用自定义渲染的方式处理每一层表头中的复选框逻辑。由于默认情况下 `el-table` 不支持直接设置多级表头的勾选项,因此需要通过组合多个 `<el-table-column>` 来模拟这一效果。 对于每个多级子项而言,在其对应的 `<el-table-column>` 中加入 `type="selection"` 属性来创建选择器,并确保这些列具有唯一的 `prop` 或者其他标识符以便区分不同级别的选择状态[^1]。 下面是一个简单的例子展示如何构建一个多级表头并为其添加全选/取消全选的功能: ```html <template> <div class="app-container"> <!-- 表格 --> <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <!-- 多级表头部分 --> <el-table-column align="center" fixed> <template slot="header"> <el-checkbox v-model="selectAllLevelOne"></el-checkbox> </template> <el-table-column type="selection" width="55"/> </el-table-column> <el-table-column label="一级分类A" align="center"> <template slot="header" slot-scope="{ column }"> <span>{{ column.label }}</span> <el-checkbox v-if="!selectAllLevelTwo[column.id]" @change="(val) => handleSelectAll(val, column.id)"> {{ selectAllLevelTwo[column.id] ? '已选' : '未选'}} </el-checkbox> </template> <el-table-column prop="aSubItem1" label="二级-A-1" /> <el-table-column prop="aSubItem2" label="二级-A-2" > <template slot="header" slot-scope="{ column }"> <span>{{ column.label }}</span> <el-checkbox v-model="selectMap['aSubItem2']">全部</el-checkbox> </template> <el-table-column prop="subOfASubItem2_1" label="三级-A-2-1" /> <el-table-column prop="subOfASubItem2_2" label="三级-A-2-2" /> </el-table-column> </el-table-column> <!-- 更多的一级栏目... --> </el-table> </div> </template> <script> export default { data() { return { tableData: [], // 数据列表 selectAllLevelOne: false, selectAllLevelTwo: {}, selectMap: {} }; }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => this.$refs.multipleTable.toggleRowSelection(row)); } }, handleSelectionChange(selection) { console.log('当前选择:', selection); let levelOneSelectedCount = 0; let totalRows = this.tableData.length; Object.keys(this.selectAllLevelTwo).forEach(key => { const subItemsChecked = !this.selectMap[key].some(item => !item.checked); this.$set(this.selectAllLevelTwo, key, subItemsChecked); if(subItemsChecked){ ++levelOneSelectedCount; } }); this.selectAllLevelOne = levelOneSelectedCount === Object.keys(this.selectAllLevelTwo).length && levelOneSelectedCount !== 0; }, handleSelectAll(checked, id) { this.$nextTick(() => { this.$set(this.selectMap[id], checked); this.handleSelectionChange(); }); } } }; </script> ``` 此代码片段展示了如何利用 Vue.js 和 Element UI 创建带有可选多级表头的表格结构。注意这里简化了一些细节以保持清晰度;实际应用时可能还需要考虑更多边界情况以及性能优化等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值