品牌网站建设策北京百度竞价托管

官方有个属性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("没有权限编辑清单，请联系管理员");}}

整体思路就是用户点击取消了，都给它再设置选中，就这么简单，虽然实现了但是感觉很鸡肋，如有其他实现方式，烦请评论相告，谢谢奥~~