elementUI實現級聯選擇器
本文實例為大傢分享瞭elementUI實現級聯選擇器的具體代碼,供大傢參考,具體內容如下
1、從後端調用接口,傳遞數據到前端
2、使用VUE代碼顯示級聯選項
<el-cascader :disabled="isDisabled" :props="defaultParams" :options="options" v-model="selectedOptions" :show-all-levels="false" filterable :clearable="true" ></el-cascader>
3、定義JS
data() { options: [], selectedOptions: [], defaultParams: { label: "name", value: "code", children: "children", }, }, created() { listArea(330000).then((response) => { console.log(response); this.options = this.getTreeData(response); this.loading = false; }); }, methods: { // 遞歸消除空數組 getTreeData(data) { // 循環遍歷json數據 for (var i = 0; i < data.length; i++) { if (data[i].children.length < 1) { // children若為空數組,則將children設為undefined data[i].children = undefined; } else { // children若不為空數組,則繼續 遞歸調用 本方法 this.getTreeData(data[i].children); } } return data; } }
4、顯示效果如下
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- elementui中的el-cascader級聯選擇器的實踐
- Vue element-ui el-cascader 隻能末級多選問題
- vue+elementUI下拉框回顯問題及解決方式
- elementUI實現下拉選項加多選框的示例代碼
- 前端elementUI select選擇器實現遠程搜索