天天看点

VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框

工作中遇到一个需求,需要将一个数据选择做成穿梭框,但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足,于是自己基于ElementUI和VUE2.X做了一个小组件,优化的地方还很多,但是能够基本满足业务需求,后面有时间也会努力去改的更加灵活。我是新手程序员,大佬们看到了有什么可以优化的地方希望能够指正。

效果图:

VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框

组件代码:

父组件需要传递带层级结构的datas,和ElementUI中tree的props。

这里使用的datas中的唯一标识是id,子元素放在parameterInfoList字段中。

defaultProps: {

children: 'parameterInfoList',

label: 'name'

}

父组件中引用方式:

学到的小技巧:ElementUI中如果要dialog不缓存其中的内容只需要给它外部套一个div然后添加v-if属性即可,值和控制dialog显隐的值相同。

 注:后续使用需要按照自己的数据字段名替换掉parameterInfoList