石家庄制作网站的公司小程序开发平台
官方有个属性selectable 设置chechBox是否可以勾选,结合在初始化获取数据时候toggleAllSelection选中checkBox, 最后并没有效果,checkBox没有选中,不知道是啥原因,找了很多文章也没有看到实际解决问题的,所以换了一种思路,如下:
重点:@select和@select-all结合
<el-table:data="receivableList"style="width: 100%"ref="multipleTable"@selection-change="handleSelectionChange"@select="handleSelect" // 用户选择checkBox触发的事件@select-all="handleSelectAll" // 用户选择全选触发的事件><el-table-column type="selection" width="50" fixed="right"></el-table-column>
</el-table>
getReceivableList() {//关键代码,数据处理请结果业务进行相关调整receivableList().then((response) => {this.receivableList = response.data.receivableList; //列表数据if (this.receivableList.length) {this.$refs.multipleTable.toggleAllSelection(); // 设置全选中this.selectList = this.receivableList // 选中的数据} });},
// 选中行:如果没有权限 不让其取消handleSelect(selection, row) {if(!this.$hasPermi("编辑清单") && selection.length != this.selectList.length) {this.$refs.multipleTable.toggleRowSelection(row, true);this.$message.warning("没有权限编辑清单,请联系管理员");}},// 全选 取消:如果没有权限 强制全部选中handleSelectAll(selection) {if(!this.$hasPermi("编辑清单") && selection.length == 0) {this.$refs.multipleTable.toggleAllSelection();this.$message.warning("没有权限编辑清单,请联系管理员");}}
整体思路就是用户点击取消了,都给它再设置选中,就这么简单,虽然实现了但是感觉很鸡肋,如有其他实现方式,烦请评论相告,谢谢奥~~