ivew组件使用Vue+Select+Tree实现单选_vueselecttree

export default {
name: “MyTree”,
data() {
return {
treeData: [], //树的数据
treeId: “”, //树回显Id
treeName: “”, //树回显名称
companyTree: “ALL”
};
},
props: {
//名字
companyName: {
type: String,
default: () => {
return “树形下拉选择框”;
}
},
//一个页面多个下拉框，唯一id
setTreeId: {
type: String,
default: “selectTree”
}
},
created() {
this.treeData = [
{
title: “四川省”,
id: “sichuan”,
expand: true,
children: [
{
title: “成都市”,
id: “chengdu”,
expand: true,
children: [
{
title: “高新区”,
id: “gaoxin”
},
{
title: “金堂”,
id: “jitang”
}
]
},
{
title: “资阳市”,
id: “ziyang”,
expand: true,
children: [
{
title: “安岳县”,
id: “anyue”
}
]
}
]
}
];
},
methods: {
selectTreeData(val) {
if (!val[0].id) {
return;
}
this.treeName = val[0].title;
this.treeId = val[0].id;
this.companyTree = val[0].id;

  console.log(val);
  this.$emit("treeVal", val);

  //下拉选择后关闭选择的树
  let selectTree = document.getElementById(`${this.setTreeId}`);
  selectTree.lastElementChild.style.display = "none";
},
changeOpt(val) {
  this.$emit("treeVal", val);
}

}
};