Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点

使用Element的组件Table表格,当使用树形数据再配合上多选框,如下:

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点_第1张图片

 会出现一种问题,点击左上方全选,只能够选中一级树节点,子节点无法被选中,如图所示:

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点_第2张图片

想要实现点击全选就选中所有的表格,要另想办法,方法如下:
1、首先给table设置一个ref
2、绑定一个@select-all方法;

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点_第3张图片

 3、定义一个变量,来识别全选框是否被选中,默认为未被选中;

checkedKeys: false,

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点_第4张图片

 4、@select-all绑定的方法如下,Element的Table表格中,select-all表示当用户手动勾选全选 Checkbox 时触发的事件 ,每次点击,checkedKeys就取反,对表格数据进行foreach循环,使多选框选中/取消选中的关键代码为:

 this.$refs.multipleTable.toggleRowSelection(row, flag);

flag=true多选框选中,flag=false取消选中
该方法不会影响@selection-change绑定的方法,若状态为全选,可以拿到全选的数据。

代码截图如下:

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点_第5张图片

全部代码如下:



上述方法只能用全选,选父级的话子级是不会选中的

下面这个方法,是选择父级子级可以选中,但是全选不能用



 

你可能感兴趣的:(vue.js,前端,javascript,前端框架)