效果圖:
封裝元件:treeselect.vue
呼叫:
import treeselect from "./treeselect";//改為自己的路徑
export default ,
data () ,
nodekey: "id",//樹形結構資料中對應的屬性名稱,可改為自己資料中屬性
defaultcheckedkeys: ,//預設初次選中的資料}}
頁面:
methods:
popoverhide (checkedids, checkeddata)
//});
//}},
在父元件的最外層div上加個@click="divclick」事件,控制選擇面板的顯隱:
divclick () )
},
附加說明:
//資料載入完成後,(以下是樹形結構)
this.officetreelist=[
,
],"levelid": 0,
"parentid": "o58",
"role": null,
"selectnode": null,
"params": null,
"disabled": false,
"message": null,
"remarkmap": null}],
"levelid": 0,
"parentid": "0",
"role": null,
"selectnode": null,
"params": null,
"disabled": false,
"message": null,
"remarkmap": null},,
],"levelid": 0,
"parentid": "0",
"role": null,
"selectnode": null,
"params": null,
"disabled": false,
"message": null,
"remarkmap": null
},],
"levelid": 0,
"parentid": null,
"role": null,
"selectnode": null,
"params": null,
"disabled": false,
"message": null,
"remarkmap": null
}]; this.defaultcheckedkeys.push('o60');//預設選中楚留香傳奇
this.$nexttick(() => )
this.selectedofficeids = ['o60'];//第一次手動放進去,以後就直接用這個變數即可
感謝文章: 力軟下拉框多選 jquery實現下拉框多選
一 說明 本文是利用easyui實現下拉框多選功能,在comboxtree其原有的基礎上對樣式進行了改進,樣式表已上傳demo,如下 二 利用easyui實現多選下拉框 function url tree data2.json 資料來源 oncheck function node,checked 讓...
力軟下拉框多選 jquery實現下拉框多選方法介紹
一 說明 本文是利用easyui實現下拉框多選功能,在comboxtree其原有的基礎上對樣式進行了改進,樣式表已上傳demo,如下 二 利用easyui實現多選下拉框 function url tree data2.json 資料來源 oncheck function node,checked 讓...
JavaScript樹形下拉框
這個js檔案是對select標籤的乙個擴充套件,使得select能夠支援樹形下拉框 使用這段js 之前,請先引入jquery庫。getjson api data jsontype function data ijs.id element.busiz id ijs.text element.busiz...