赞
踩
首先上一个树形控件的HTML
<el-tree :data="treeData" // 树形控件数据源 :props="defaultProps" // 树形控件的配置项 node-key="id" // 每个树节点对应的唯一标识符 highlight-current // 是否高亮 ref="tree" // ref标识符 :default-expanded-keys="expandKeys" //默认展开节点的key数组 @current-change="currentNode" // 当前选中的节点发生变化时触发的事件 :expand-on-click-node="false" // 是否在点击节点的时候选中节点,默认值为true > // 插槽,放自定义节点内容 // 此处的class和slot-scope均是固定写法 <span class = "custom-tree-node" slot-scope = " { node, data }"> //label标题 <span>{{ data.categoryName }}</span> // 此处底下的sysDeafult标识的是是否是系统默认项,如果是,则值为1,不是系统默认项,自己添加的则值为0 <span class="tree-botton-arr" v-if = "data.sysDefault !=1"> // 新增按钮 如果node.level等于1即 该节点为一级父节点,则出现新增按钮 <el-button type="text" size="mini" @click="() => append(data, node)" v-if="node.level === 1"> <i class = "el-icon-plus"></i> </button> // 删除按钮 <el-button type="text" size="mini" @click = "() => remove(node, data)"> <i class = "el-icon-delete"></i> </el-button> // 编辑按钮 <el-button type="text" size="mini" @click = "() => edit(node, data)"> <i class="el-icon-edit"></i> </el-button> </span> </el-tree>
效果图
上js data部分
data() { return{ // 树形控件的数据源,为数组。 treeData: [ { id: "", categoryName: "", child: [ { id:"", catogoryName: "", child: [] } ] } ], // 树形控件配置项,为对象,label代表节点的title标签,children代表节点的子树(孩子) defaultProps: { label: 'categoryName', children: 'child' }, // 默认展开的数组 expandKeys: [], } }
上js methods等部分
// 在树形结构渲染到页面之前,需要后台先获取树形控件的数据源 // 在mounted()中调用获取树形控件数据源的函数 mounted() { this.getTreeData(); }, // 上方法 methods: { // 获取树形结构的数据源 getTreeData() { // 调用api接口,获取数据库数据库数据 ConfigApi.getCategoryTree().then(res => { if (res.code === 200) { this.treeData = res.result; // 设置默认选中和默认展开的节点 setTimeout(() => { // 如果树形控件的数据源,则将其第一个节点设置为当前选中的节点 及 当前展开的节点 if (this.treeData.length > 0 ) { this.setCurrentKey(this.treeData[0].id); this.expandKeys = [this.treeData[0].id]; } }, 0); } }); }, // setCurrentKey为element官网自带的通过key设置当前某个节点选中的状态,使用此方法必须设置node-key属性 // 注意:(key)待被选中的节点key, 若为null则取消当前高亮的节点 setCurrentKey(key) { // 如果存在当前传入的参数key,则为当前树形控件设置选中的节点 if (key) { this.$refs.tree.setCurrentKey(key); // 当前节点发生变化时,触发 this.currentNode( null, // 先获取当前被选中节点的key,再根据选中的节点key拿到组件中的node this.$refs.tree.getNode(this.$refs.tree.getCurrentKey()) ); } }, }
// current-change 对应的currentNode()事件 currentNode(val, node) { const currentType = { name: node.data.categoryName, id: node.data.id, tag: node.level === 1, sysDefault: node.data.sysDefault, type: node.data.categoryType, parentId: node.level === 1 ? '' : node.parent.data.id, parentName: node.parent.data.categoryName, parentType: node.parent.data.categoryType, }; // console.log(val); // console.log(node); // console.log(currentType) this.$emit("currentTypeChange", currentType); // 父子组件传值,第一个值为函数名,第二个值为传的参数名称 }
控制台console.log(val)
控制台console.log(node)
插叙父子组件传值的知识
this.$emit("function", param); //其中function为父组件定义的函数,param为需要传递的参数
父组件
this.$emit("currentTypeChange", currentType);
子组件
<p @currentTypeChange = 'setValue'> // 或者写成这样,@ 为 v-on:的简写嘛 <p v-on:currentTypeChange = 'setValue'> data() { return{ currentType: null, } }, methods: { // currentTypeChange操作对应的函数setValue // 将值通过val传过来啦,并赋值给子组件的currentType setValue(val) { this.currentType = val; } }
在这里插入代码片
贴上插槽内部的方法,增加节点,删除节点,编辑节点
// 新增节点 append(data, node) { this.formVisible = true; this.formData = { parentId: data.id, parentType: data.categoryType, categoryType: '', }; }, // 删除节点 remove(node, data) { if (node.level === 1 && data.child && data.child.length) { return this.$message.warning("请先删除子类"); } this.$confirm("确认删除吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { ConfigApi.deleteit(data.id).then(res => { if (res.code === 200) { if (node.level ===1) { this.$ref.tree.remove(this.$refs.tree.getNode(data.id)); if (this.treeData.length > 0) { this.setCurrentKey(this.treeData[0].id); this.expandKeys = [this.treeData[0].id]; } else { this.$emit("currentTypeChange", {}); } } else { this.setCurrentKey(node.parent.data.id); this.$refs.tree.remove(this.$refs.getNode(data.id)); } this.$message.success('删除成功') }); }).catch(() => { this.$message.info('删除成功'); }); }, // 编辑 edit(node, data) { this.formVisible = true; if (node.level != 1) { data.parentType = node.parent.data.categoryType; } this.formData = data; }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。