介绍
这篇文章给大家介绍使用ElementUI怎么实现一个表嵌套功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
& lt; template>
,& lt; div>
& lt; el-table才能
,,ref=癿ultipleTable"
,,:data=https://www.yisu.com/zixun/皌ableData”
行键=" id "
边境
default-expand-all
:select-on-indeterminate=" true "
:tree-props="{孩子们:‘孩子’,hasChildren:‘hasChildren}”
@select=" rowSelect "
@select-all=" selectAll ">
表格的多选我可以分为2项目,1个是正向选中,意思就是结帐为真实的时候,2是反向取消就是结帐为假的时候,那下面我就来分析下这个正向选中和反向取消如何实现
一、正向选中
假设我有这样的数据
以下面图1片为例:
,,,在点击子节点的时候我们需要把子节点的父节点和跟节点同时进行选中处理
,,,跟节点——父节点——子节点
,,,图2是我的数据中声明的数据,数据中包含完成是否被选中和孩子是否有子节点
现在我们正向选中思路明确了那我们怎么来实现?
当我点击子节点时候需要记录子节点的父节点一直到跟节点,那我们就用到了树树的概念
下面代码用到了树的回溯的思想,查找路径使用先序遍历,因为你不确定你点击的是子节点是在哪个子树上,
具体的树方法思想请百度一下。
treeFindPath(树,时间函数,大敌;;path =, []), {
,,if 树(!),return [];
,,for (const data of 树),{
,,,path.push(数据);
,,,if (func(数据),return 路径;
,,,if (data.children), {
,,,,const findChildren =, this.treeFindPath (data.children,函数的不同之处是,路径);
,,,,if (findChildren.length), return findChildren;
,,,}
,,,path.pop ();
,,}
,,return [];
,,}, 通过上面这段代码我们调用的时候传节点的id会返回一个数组,数组包含它所在路径上的对象,这样我们就可以通过循环遍历这个数组通过toggleRowSelection反法来实现页面状态样式的改变。
二、反向取消
反向取消正好和选中相反
在点击子节点取消的时候我们需要判断同级的节点是不是都取消了,如果都取消了需要把这个节点的父节点改为取消状态,之后再查其父节点同级是否都是取消状态,如果还有取消状态,同理跟刚才方式一样接着向其上级节点查找直到不满足条件为止,跳出循环。
简单的来个示意图
在点击4节点时,会查看同级节点5和6是否是取消状态,如果都是取消状态,查他们的上一级2,把2改为假,在查2的同3级是否是取消如果是取消在查1
如果同级有选中状态会直接跳出循环不进行下一步操作
下面是取消选中代码
还是用树的代码,把获取的数组反向()进行了翻转
第一次循环从点击那个节点网上查找
这里使用的循环如果不满足直接终止后面循环
三、全选
这里我感觉写的比较啰嗦,
全选时候我会先通过数据中完成来递归判断是否有没有选中的
如果有没有选中会递归执行把所有数据中的完成变为真,如果都选中了,会递归修改为false,
下面是全选的所有代码
,/* *
,,*,@describe 全选
,,*/selectAll才能(选择),{
,,console.log(选择);
,,let isAllCheck =, this.selectAllRecursion (this.tableData);//,,,是否有aa为假代表是有没选中
,,this.checkoutAll (this.tableData, ! isAllCheck);
,,},
,/* *
,,*,@describe 递归判断完成是否都是真的,假的代表是有没选中
,,*/selectAllRecursion才能(arr), {
,,let isCheck =,真的;
,,function isRecursion (arr), {
,,,arr.forEach((项),=祝辞,{
,,,,if (! item.isChecked), {
,,,,,isCheck =,假;
,,,,,if (item.children), {
,,,,,,isRecursion (item.children);
,,,,,}
,,,,}
,,,});
,,}
,,isRecursion (arr);
,,return isCheck;
,,},
,/* *
,,*,@describe 把所有的够改为真或者错误的
,,*/checkoutAll才能(加勒比海盗,布尔),{
,,var _this =,;
,,function allCheck(加勒比海盗,布尔),{
,,,arr.forEach((项),=祝辞,{
,,,,item.isChecked =,布尔;
,,,,_this。美元refs.multipleTable.toggleRowSelection(项目,,布尔);
,,,,if (item.children), {
,,,,,allCheck (item.children,布尔);
,,,,}
,,,});
,,}
,,allCheck(加勒比海盗,布尔);
null
