当前位置: 首页 > Web前端 > vue.js

元素树控件el-tree添加悬停事件完整代码

时间:2023-03-31 23:02:45 vue.js

exportdefault{data(){return{data:[{id:1,label:'一级1',is_show:false,children:[{id:4,label:'二级1-1',is_show:false,children:[{id:9,is_show:false,label:'三级1-1-1'},{id:10,is_show:false,label:'三级1-1-2'}]}]}],defaultProps:{children:'children',label:'label'}}},methods:{append(data){constnewChild={id:id++,label:'testtest',孩子们:[]};如果(!data.children){this.$set(data,'children',[]);}data.children.push(newC希尔);},remove(node,data){constparent=node.parent;constchildren=parent.data.children||父数据;constindex=children.findIndex(d=>d.id===data.id);children.splice(index,1);},/**这里是按键一步,实现hover*/renderContent(h,{node,data,store}){console.log(data)return({data.is_show=true}}on-mouseout={()=>{data.is_show=false}}>{node.label}{data.is_show?this.append(data)}>添加this.remove(node,data)}>编辑this.remove(node,data)}>删除:空});},}