check-strictly :父子是否联动，根据业务修改
运行效果:
代码:
<template><div><el-selectplaceholder="请选择"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-checkboxref="treeForm":check-strictly="true"></el-tree></el-select></div></template><script>export default {data() {return {exname: "",huixianarr: [], //用于回显选中的数据ids: "", //后台需要的参数idoptions: [{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) => {//过滤拿到选中的idarr.push(item.id);});lst.checkedNodes.forEach((item) => {//过滤拿到选中的namename.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>
