生活随笔
收集整理的這篇文章主要介紹了
el-cascader多层级联点击动态加载子级
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
功能場景：
區劃級聯，例如從全國各省->市->縣->鄉->村，五級結構，那么如果通過一個接口數據量勢必太大了。可能會出現接口請求慢的情況，所以就需要點擊父級再去請求下一級這樣一個實現思路。
效果圖：
實現代碼：
element的el-cascader 是提供了動態加載方法。
接口的數據結構
<!--行政區級聯下拉框--
>
<template
><div
class="cas-wrap"><el-cascader :title
="getCascaderTitle()":ref
="refId" :placeholder
="_areaName||'請選擇區域'" :show-all-levels
="false":props
="propsTree" @change
="change" v-model
="curXzq" size="small"></el-cascader
></div
></template
><script
>
import api from
'../../../../../api/api_configcenter'
let defaultareaCode
= ''
let xzqLevel
= 12
export default
{name:
"xzqSelect",
data(){return {refId:
'',curXzq:
['1'],options:
[],cTitle:undefined,/*行政區劃*/propsTree:
{expandTrigger:
"click",checkStrictly:true,emitPath:false,lazy: true,lazyLoad
(node, resolve
) {let qhdm
;if (node.root
) {qhdm
= defaultareaCode
} else {qhdm
= node.value
}api.getAreaTree
({qhdm: qhdm?qhdm:1
}).then
(res
=> {if (res.code
== 0 && res.data
&& res.data.length
>0) {const nodes
= Array.from
(res.data
).map
(item
=> ({value: item.qhdm,label: item.qhmc,leaf: item.qhdm.length
>= xzqLevel,
}));resolve
(nodes
);} else {resolve
([]);}})}},
}},props:
{"areaCode":
{type:String,default:
''},
"areaName":
{type:String,default:
''},/*默認級聯級別，到村12， 省2，市4，縣6，鄉鎮9，村12*/level:
{default:
12}},computed:
{_areaCode:
{get(){return this.areaCode
||''},set
(val
){this.
$emit('update:areaCode',val
)}},_areaName:
{get(){return this.areaName
||''},set
(val
){this.
$emit('update:areaName',val
)}}},
created() {xzqLevel
= this.level
this.refId= 'xzqSelect' +
(Math.random
() *
1000)},methods:
{/*獲取行政區記錄下拉的title*/
getCascaderTitle(){if
(!this.
$refs[this.refId
]){return
""}let selectedNodes
= this.
$refs[this.refId
].getCheckedNodes
();let title
= '';if
(selectedNodes
[0]){this.cTitle
= selectedNodes
[0].label
let pathNodes
= selectedNodes
[0].pathNodes
;pathNodes.forEach
(item
=> {title
+= item.label +
"-"});if
(title
){title
= title.slice
(0,title.length
-1 );}} return title
;},
getCheckedNodes(){return this.
$refs[this.refId
].getCheckedNodes
()},change
(row
){let checkedNodes
= this.
$refs[this.refId
].getCheckedNodes
()let res
= ''if
(checkedNodes
&& checkedNodes.length
> 0){res
= this.
$refs[this.refId
].getCheckedNodes
()[0].data
}this.
$nextTick(() =>{let obj
= {qhdm:row,qhmc:this.cTitle
}console.log
('這里就拿到最后一級區劃名稱和區劃代碼',obj
)this._areaCode
= obj.qhdmthis._areaName
= obj.qhmc// this.
$emit('changeQhdm',obj
)})},
}
}
</script
><style scoped
lang="scss">.blue_select
{width:
100%
;}.sys_background_image
{/deep/ .el-input__inner
{&:-moz-placeholder, textarea:-moz-placeholder
{ color:
} &:-ms-input-placeholder, textarea:-ms-input-placeholder
{ color:
} &::-webkit-input-placeholder, textarea::-webkit-input-placeholder
{ color:
} }}.cas-wrap
{}.words
{border-color: color: height: 30px
;line-height: 30px
;border-radius: 4px
;border: 1px solid padding:
0 15px
;box-sizing: content-box
;font-size: 13px
;margin-top: 3px
;cursor: pointer
;}
</style
>
總結
以上是生活随笔為你收集整理的el-cascader多层级联点击动态加载子级的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
