Element@2.15.14-tree checkStrictly 状态实现父项联动子项，实现节点自定义编辑、新增、删除功能

news2024/12/19 16:42:11

背景：现在有一个新需求，需要借助树结构来实现词库的分类管理，树的节点是不同的分类，不同的分类可以有自己的词库，所以父子节点是互不影响的；同样为了选择的方便性，提出了新需求，选择了父级子级需要全选，父级取消勾选子级需要全部取消勾选；分类支持修改名称、增加子节点、删除子节点，多选子节点时需要获取当前所选分类下的所有词库。

一、开发前需要知道的

1、树结构需要借助 element 的 tree 组件

2、树结构需要设置父子级不关联，即 :check-strictly="true"

3、节点选择时如果是非叶子结点（最后一层的子节点，没有 children），需要递归获取子节点，如果进行节点的选择与取消选择

4、自定义节点需要通过 slot 方式活着 render-content 方式实现

二、实现流程

1、引入 tree，传入源数据 data、设置 key，设置默认配置属性 defaultProps

1. 定义 tree
<el-tree
    :check-strictly="true"
    :data="data"
    @check-change="checkChange"
    ref="treeRef"
    show-checkbox
    default-expand-all
    node-key="id"
    ref="tree"
    highlight-current
    :props="defaultProps"
>
</el-tree>
2. 设置 data
data = [{id: xx, label: xx, children: {id: number, label: string, children: []}[]}]
3. 设置父子不关联
:check-strictly="true"
4. 设置默认配置
const defaultProps = {
    children: "children",
    label: "label",
}

2、实现父子勾选子级联动

// 1. 给 el-tree 绑定 check-change 事情
@check-change="checkChange"

// 2. 实现 checkChange 函数
// data：当前节点 checked：节点是否选中 indeterminate：是否有选中的子项
function checkChange(data, checked, indeterminate) {
    console.log("data, checked, indeterminate", data, checked, indeterminate);
    this.$nextTick(() => {
        // 2.1 获取节点详细信息
        const nodeInfo = this.$refs.treeRef.getNode(data.id);
        const { isLeaf, checked } = nodeInfo;
        this.nodeInfo = nodeInfo;
        function getAllIds(arr, res = []) {
            for (let i = 0; i < arr.length; i++) {
                res.push(arr[i].id);
                if (arr[i].children && arr[i].children.length) {
                    getAllIds(arr[i].children, res);
                }
            }
            return res;
        }
        // 2.2 获取当前已选中的节点
        console.log(this.$refs.treeRef.getCheckedKeys());
        // 2.3 如果是父级，子级选中跟取消选择
        if (!isLeaf) {
        const checkedIds = this.$refs.treeRef.getCheckedKeys();
        const ids = getAllIds(nodeInfo.data.children);
        console.log(ids);
        // 2.3.1 父级选中，子级全选
        if (checked) {
            this.$refs.treeRef.setCheckedKeys(
            Array.from(new Set([...checkedIds, ...ids]))
            );
        } else {
        // 2.3.2 父级取消选中，子级全不选
            this.$refs.treeRef.setCheckedKeys(
                Array.from(new Set(checkedIds.filter((item) => !ids.includes(item))))
            );
        }
        }
    });
},

3、通过 slot 实现编辑、新增、删除

1. slot 内容
<span class="custom-tree-node" slot-scope="{ node, data }">
    <span>{{ node.label }}</span>
    <span>
    <el-button type="text" size="mini" @click="() => edit(node, data)">
        edit
    </el-button>
    <el-button type="text" size="mini" @click="() => append(data)">
        Append
    </el-button>
    <el-button
        type="text"
        size="mini"
        @click="() => remove(node, data)"
    >
        Delete
    </el-button>
    </span>
</span>

2. 设置函数
{
  // 2.1 编辑，子级可以弹窗回显名称，然后修改名称
  edit(node, data) {
    console.log(node, data);
  },
  // 2.2 新增，新增内容自己定，也可以弹窗自定义名称，通过接口返回 id 再拼接
  append(data) {
    const newChild = { id: this.id++, label: "testtest", children: [] };
    if (!data.children) {
      this.$set(data, "children", []);
    }
    data.children.push(newChild);
  },
  // 2.3 删除，可以先进行提示，提示确定后再删
  remove(node, data) {
    const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex((d) => d.id === data.id);
    children.splice(index, 1);
  }
}

三、整体代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"
    />
    <style>
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
    <div id="app">
      <el-tree
        :check-strictly="true"
        :data="data"
        @check-change="checkChange"
        ref="treeRef"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => edit(node, data)">
              edit
            </el-button>
            <el-button type="text" size="mini" @click="() => append(data)">
              Append
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              Delete
            </el-button>
          </span>
        </span>
      </el-tree>
      <div class="buttons">
        <el-button @click="getCheckedNodes">通过 node 获取</el-button>
        <el-button @click="getCheckedKeys">通过 key 获取</el-button>
        <el-button @click="setCheckedNodes">通过 node 设置</el-button>
        <el-button @click="setCheckedKeys">通过 key 设置</el-button>
        <el-button @click="resetChecked">清空</el-button>
      </div>
    </div>
    <script>
      var Main = {
        methods: {
          edit(node, data) {
            console.log(node, data);
          },
          append(data) {
            const newChild = { id: this.id++, label: "testtest", children: [] };
            if (!data.children) {
              this.$set(data, "children", []);
            }
            data.children.push(newChild);
          },
          remove(node, data) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex((d) => d.id === data.id);
            children.splice(index, 1);
          },
          checkChange(data, checked, indeterminate) {
            this.node = data;
            this.checked = checked;
            this.indeterminate = indeterminate;
            // console.log("data, checked, indeterminate", data, checked, indeterminate);
            this.$nextTick(() => {
              console.log(data.id);
              const nodeInfo = this.$refs.treeRef.getNode(data.id);
              const { isLeaf, checked } = nodeInfo;
              this.nodeInfo = nodeInfo;
              console.log(nodeInfo);
              // console.log(
              //   "nodeInfo, isLeaf, childNodes, checked",
              //   nodeInfo,
              //   isLeaf,
              //   childNodes,
              //   checked
              // );
              function getAllIds(arr, res = []) {
                for (let i = 0; i < arr.length; i++) {
                  res.push(arr[i].id);
                  if (arr[i].children && arr[i].children.length) {
                    getAllIds(arr[i].children, res);
                  }
                }
                return res;
              }
              console.log(this.$refs.treeRef.getCheckedKeys());
              if (!isLeaf) {
                const checkedIds = this.$refs.treeRef.getCheckedKeys();
                const ids = getAllIds(nodeInfo.data.children);
                console.log(ids);
                if (checked) {
                  this.$refs.treeRef.setCheckedKeys(
                    Array.from(new Set([...checkedIds, ...ids]))
                  );
                } else {
                  this.$refs.treeRef.setCheckedKeys(
                    Array.from(
                      new Set(checkedIds.filter((item) => !ids.includes(item)))
                    )
                  );
                }
              }
            });
          },
          getCheckedNodes() {
            console.log(this.$refs.tree.getCheckedNodes());
          },
          getCheckedKeys() {
            console.log(this.$refs.tree.getCheckedKeys());
          },
          setCheckedNodes() {
            this.$refs.tree.setCheckedNodes([
              {
                id: 5,
                label: "二级 2-1",
              },
              {
                id: 9,
                label: "三级 1-1-1",
              },
            ]);
          },
          setCheckedKeys() {
            this.$refs.tree.setCheckedKeys([3]);
          },
          resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
          },
        },

        data() {
          return {
            id: 10,
            data: [
              {
                id: 1,
                label: "一级 1",
                children: [
                  {
                    id: 4,
                    label: "二级 1-1",
                    children: [
                      {
                        id: 9,
                        label: "三级 1-1-1",
                      },
                      {
                        id: 10,
                        label: "三级 1-1-2",
                      },
                    ],
                  },
                ],
              },
              {
                id: 2,
                label: "一级 2",
                children: [
                  {
                    id: 5,
                    label: "二级 2-1",
                  },
                  {
                    id: 6,
                    label: "二级 2-2",
                  },
                ],
              },
              {
                id: 3,
                label: "一级 3",
                children: [
                  {
                    id: 7,
                    label: "二级 3-1",
                  },
                  {
                    id: 8,
                    label: "二级 3-2",
                  },
                ],
              },
            ],
            defaultProps: {
              children: "children",
              label: "label",
            },
          };
        },
      };
      var Ctor = Vue.extend(Main);
      new Ctor().$mount("#app");
    </script>
  </body>
</html>