天天看點

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