el-tree和el-tag的应用

<div class="treeselect-container">
    <el-input v-model="treeCheckedList" />
    <el-icon @click="treeSelectIsShow = !treeSelectIsShow">
      <Edit />
    </el-icon>
  </div>
  <Dialog :modelValue="treeSelectIsShow" :fullscreen="true">
    <template #title> 菜单编辑 </template>
    <div class="treeSelect-container">
      <!-- <el-input v-model="treeCheckedStr" /> -->
      <el-tag
        v-for="(item, index) in treeCheckedList"
        :key="item"
        class="mx-1"
        :closable="true"
        @close="closeTag(item)"
      >
        {{ item }}
      </el-tag>
      <el-input
        v-if="inputVisible"
        ref="InputRef"
        v-model="inputTag"
        class="ml-1 w-20"
        size="small"
        style="width: 60px"
        @keyup.enter="addTag()"
        @blur="inputVisible = false"
      />
      <el-button
        v-else
        class="button-new-tag ml-1"
        size="small"
        @click="inputVisible = true"
      >
        + New Tag
      </el-button>
    </div>
    <div class="treeRefList-container">
      <div class="treeRefList-box" v-for="(menus, index) in menusList">
        {{ menus.title }}
        <!-- <div v-for="menu in menusItem.children">
            ---{{ menu.title }} -->
        <el-input v-model="queryList[index]" @input="onQueryChanged(index)">
        </el-input>
        <div class="treeRefListbig">
          <el-tree
            :ref="(el) => (treeRefList[index] = el)"
            :data="menus.children"
            :props="treeProps"
            show-checkbox
            class="treeRefList"
            :default-expand-all="true"
            :filter-node-method="filterMethod"
            node-key="title"
            @check-change="checkChange"
            :default-checked-keys="treeCheckedList"
          >
          </el-tree>
        </div>
      </div>
    </div>
  </Dialog>

1.通过icon点击控制对话框显示隐藏

2.从store引入菜单进行渲染

（1）定义tree的数据类型

const treeProps = {
  value: "key",
  label: "title",
  children: "children",
};

（2）for渲染

（3）点击复选框后判断是否加入选择数组 通过el-tree的check-change事件

const checkChange = (data, isChecked) => {
  //判断点击的是否是叶子节点
  if (data.isLeaf) {
    //判断是否被选中
    if (isChecked) {
      //选中执行加入数组的方法
      addTreeCheckedList(data.title);
    } else {
      //否则执行被删除的数组的方法
      deleteTreeCheckedList(data.title);
    }
  }
};

点击tag增加

（1）通过v-if 控制是tag 还是input

（2）keyup.enter绑定添加事件

在这里插入代码片const addTag = () => {
  const nodeArr = [];
  //遍历菜单每一项
  menusList.value.forEach((item) => {
    //遍历菜单每一项的孩子的每一项
    item.children.forEach((item) => {
      //遍历菜单的孩子的每一项的每一项
      item.children.forEach((item) => {
        //将菜单孩子每一项的名字加入数组
        nodeArr.push(item.title);
      });
    });
  });

  //判断如果输入的tag在菜单孩子的数组里
  if (nodeArr.some((item) => inputTag.value == item)) {
    //则将输入项加入到选中的数组中
    addTreeCheckedList(inputTag.value);
    //遍历每个treeReflist
    treeRefList.value.forEach((item) => {
      console.log(item);
      //setCheckedKeys设置目前选中的节点，接收两个参数:1.被选中的多节点 key 的数组 2.布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false.
      //将选择的值以及已经选中值设置为选中的节点
      item.setCheckedKeys([inputTag.value, ...item.getCheckedKeys()]);
    });
  } else {
    ElMessage("无此菜单");
    return;
  }
  inputTag.value = "";
};

##通过tag的close事件绑定删除事件

const closeTag = (tag) => {
  // 遍历每个treeRefList
  treeRefList.value.forEach((treeRef) => {
    const checkedKeysItem = [];
    //拿到当前树选择的节点无论是半选和全选并遍历
    treeRef.getCheckedKeys().forEach((checkedKey, index) => {
      //getHalfCheckedNodes() 获取当前树的半选节点
      //判断当前树有没有进行半选，选中没有进行半选的将选中的添加到数组
      if (
        !treeRef
          .getHalfCheckedNodes()
          .some((halfCheckedNode) => halfCheckedNode == checkedKey)
      ) {
        checkedKeysItem.push(checkedKey);
      }
    });

    //在没有进行半选的数组中判断出删除的tag
    if (checkedKeysItem.some((item) => item == tag)) {
      //在数组中将删除的tag过滤
      const checkedKeyF = checkedKeysItem.filter((item) => item != tag);
      console.log(checkedKeyF);
      //将过滤后的数组设置选中
      treeRef.setCheckedKeys(checkedKeyF);
    }
    // item.setCheckedKeys(() => item.getCheckedKeys().splice(item.getCheckedKeys().indexOf(tag), 1))
  });
  deleteTreeCheckedList(tag);
};