el-select和el-tree组成树下拉框以和数据回显

check-strictly :父子是否联动，根据业务修改

运行效果:

代码:

<template>
  <div>
    <el-select
      placeholder="请选择"
      v-model="exname"
      clearable
      @clear="handleClear"
      ref="selectUpResId"
      style="width: 100%"
    >
      <el-option hidden :key="1" :value="1"></el-option
      ><!--这个必不可少否则显示不出来下拉数据-->
      <!-- check-strictly :父子是否联动，根据业务修改 -->
      <el-tree
        :data="options"
        node-key="id"
        :props="defaultProps"
        :default-checked-keys="huixianarr"
        @check="handleNodeClick"
        show-checkbox
        ref="treeForm"
        :check-strictly="true"
      >
      </el-tree>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      exname: "",
      huixianarr: [], //用于回显选中的数据
      ids: "", //后台需要的参数id
      options: [
        {
          name: "平行世界",
          id: "0",
          children: [
            {
              id: "1",
              name: "黑暗之地",
              code: "U05000000",
              content: null,
              level: 1,
              type: null,
              parentId: null,
              img: null,
              children: [
                {
                  id: "10",
                  name: "秘制森美",
                  code: "CSYWDY05",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "11",
                  name: "卡之宝",
                  code: "U05000003",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "13",
                  name: "瓦罗兰大陆",
                  code: "U05000008",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "14",
                  name: "梦幻城",
                  code: "U05000005",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: [
                    {
                      id: "15",
                      name: "R-长安城",
                      code: "05000501",
                      content: null,
                      level: 1,
                      type: null,
                      parentId: "14",
                      img: null,
                      children: null,
                    },
                    {
                      id: "16",
                      name: "M-阎王殿",
                      code: "05005002",
                      content: null,
                      level: 1,
                      type: null,
                      parentId: "14",
                      img: null,
                      children: null,
                    },
                    {
                      id: "17",
                      name: "X-天庭",
                      code: "05005053",
                      content: null,
                      level: 1,
                      type: null,
                      parentId: "14",
                      img: null,
                      children: null,
                    },
                  ],
                },
                {
                  id: "18",
                  name: "狂战森林",
                  code: "JZZF",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "2",
                  name: "死亡峡谷",
                  code: "U05000001",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: [
                    {
                      id: "3",
                      name: "静海之地",
                      code: "U05000011",
                      content: null,
                      level: 1,
                      type: null,
                      parentId: "2",
                      img: null,
                      children: null,
                    },
                  ],
                },
                {
                  id: "21",
                  name: "艾尔兰大陆",
                  code: "111",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "23",
                  name: "光明之地",
                  code: "112",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: [
                    {
                      id: "24",
                      name: "阿兹卡班",
                      code: "123123",
                      content: null,
                      level: 1,
                      type: null,
                      parentId: "23",
                      img: null,
                      children: null,
                    },
                  ],
                },
                {
                  id: "27",
                  name: "毕得森堡",
                  code: "DY001",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "4",
                  name: "A市",
                  code: "U05000002",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: [
                    {
                      id: "5",
                      name: "森志",
                      code: "U050000012",
                      content: null,
                      level: 1,
                      type: null,
                      parentId: "4",
                      img: null,
                      children: null,
                    },
                  ],
                },
                {
                  id: "6",
                  name: "Wisconsin",
                  code: "CSYWDY01",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "7",
                  name: "M78",
                  code: "CSYWDY02",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "8",
                  name: "艾匹克",
                  code: "CSYWDY03",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
                {
                  id: "9",
                  name: "霍尔木兹",
                  code: "CSYWDY04",
                  content: null,
                  level: 1,
                  type: null,
                  parentId: "1",
                  img: null,
                  children: null,
                },
              ],
            },
            {
              id: "12",
              name: "古森堡",
              code: "QXPGYWDY",
              content: null,
              level: 1,
              type: null,
              parentId: "7",
              img: null,
              children: null,
            },
            {
              id: "20",
              name: "德玛西亚",
              code: "11101",
              content: null,
              level: 1,
              type: null,
              parentId: "21",
              img: null,
              children: null,
            },
            {
              id: "22",
              name: "1111",
              code: "1111",
              content: null,
              level: 1,
              type: null,
              parentId: "8",
              img: null,
              children: null,
            },
            {
              id: "25",
              name: "123321",
              code: "1231233",
              content: null,
              level: 1,
              type: null,
              parentId: "6",
              img: null,
              children: null,
            },
          ],
        },
      ], //树状结构数据
      defaultProps: {
        children: "children",
        label: "name",
      },
      hxlist: [],
    };
  },
  created() {
    //获取到回显数据
    this.$nextTick(() => {
      this.$refs.treeForm.setCheckedKeys([]);
      this.huixianarr = [1, 10, 7];
      this.huixianarr.forEach((index) => {
        this.setname(this.options[0], index);
      });
      this.exname = this.hxlist.join(",");
    });
  },
  methods: {
    // 节点点击事件
    handleNodeClick(data, lst) {
      let arr = [],
        name = [];
      lst.checkedNodes.forEach((item) => {
        //过滤拿到选中的id
        arr.push(item.id);
      });
      lst.checkedNodes.forEach((item) => {
        //过滤拿到选中的name
        name.push(item.name);
      });
      this.exname = name.join(","); //显示内容
      this.ids = arr.join(","); //后台传参需要的id
    },
    // 选择器配置可以清空选项，用户点击清空按钮触发
    handleClear() {
      this.ids = "";
    },
    //递归查树
    setname(list, ids) {
      list.children.forEach((item) => {
        if (item.id == ids) {
          this.hxlist.push(item.name);
        } else {
          if (item.children != null) {
            this.setname(item, ids);
          }
        }
      });
    },
  },
};
</script>

这篇好文章是转载于：学新通技术网