标签：node 封装 children back label 树形 element data id

组件封装页面

<template> <!-- 已完成 --> <div> <el-select v-model="value" ref="select" clearable> <el-option :value="value" :label="value" class="options" style="height: auto"> <el-tree show-checkbox filterable id="tree-option" ref="selectTree" :data="data" :props="defaultProps" node-key="id" @check="checkNode" @check-change="nodeChanged" ></el-tree> </el-option> </el-select> </div> </template>
<script> export default { data() { return { value: "", defaultProps: { children: "children", label: "label" }, 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" } ] } ],
obj: {}, checkNodeInfo: {}, allNodeArr: {} }; }, created() { //有子集的禁止选择 this.isDisabled(this.data); }, mounted() { //回显 if (this.back.node.id) { this.$refs.selectTree.setChecked(this.back.node.id, true); this.value = this.back.node.label; this.allNodeArr = this.back; } },
methods: { checkNode(a, b) { //控制单选不让多个元素被选中 if (b.checkedKeys.length > 0) { this.$refs.selectTree.setCheckedKeys([a.id]); } }, nodeChanged(data, checked, leaf) { //获取当前被选中节点元素 let checkNode = this.$refs.selectTree.getNode(data); this.checkNodeInfo = { node: { label: checkNode.data.label, id: checkNode.data.id }, parent: { label: checkNode.parent.data.label, id: checkNode.parent.data.id } }; // this.getEveryInfo(this.data, data); if (checked) { this.value = data.label; this.obj = data; this.allNodeArr = this.checkNodeInfo; } else { if (data.id == this.obj.id && !checked) { this.value = ""; } } },
//递归循环子集 getEveryInfo(data, node) { data.forEach((el, index) => { if (el.children) { this.getEveryInfo(el.children, node); } }); },
isDisabled(data) { data.forEach((item, index) => { if (item.children) { item.disabled = true; this.isDisabled(item.children); } }); } }, //父组件传递回显数据 props: { back: { type: Object, default: {} } },
watch: { value(newValue, oldValue) { if (newValue == "") { this.$refs.selectTree.setChecked(this.obj.id, false); } } } }; </script>
<style> </style>     引入组件页面 <template> <div style="display:flex"> <selectCheck ref="selectTree" :back="back"></selectCheck> <el-button @click="submit">提交</el-button> </div> </template>
<script> import selectCheck from "@/components/tree/selectCheckedBox"; export default { name: "selectCheckedBox", components: { selectCheck }, data() { return { back: { // parent: { // id: 3, // label: "一级 3" // }, // node: // { // id: 8, // label: "二级 3-2" // }   } }; }, created() {}, methods: { submit() { console.log(this.$refs.selectTree); // this.back = this.$refs.selectTree.allNodeArr[0]; } } }; </script>
<style> </style>

标签：node,封装,children,back,label,树形,element,data,id
来源： https://www.cnblogs.com/fanfan1991/p/14387698.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。