element-ui的级联选择器默认获得的是 value 的数值,获取 label 的值需要使用getCheckedNodes这个方法。
我使用级联选择器用于进行地区的选择,如下:
template内:
<el-cascader v-model="regionCodeList" ref="city" placeholder="请选择生产地区" clearable :props="props" @change="handleChange"></el-cascader>
想要从数据库内异步获取每一级的数据,需要使用动态加载,也就是设置懒加载lazy为true,因为我的数据一共就三级,所以高于三级的部分就不再进行方法调用了,props实在data(){}内进行的
props: {
// 单选
checkStrictly: true,
expandTrigger: 'hover',
getCheckedNodes: 'leafOnly',
// 懒加载
lazy: true,
lazyLoad (node, resolve) {
let pid = 0 // 默认的 pid 为 0
if (node.level > 0) { // 如果不是最外层节点
pid = node.value // 使用当前节点的 value 作为 pid
}
if (node.level < 3) {
// 调用您的 getCityInfo 方法来获取数据
that.getCityInfo(pid).then((response) => {
// 将数据转换为级联选择器需要的格式
const nodes = response.data.map(item => ({
value: item.id,
label: item.name,
leaf: item.pid === 1
}))
// 通过调用 resolve 将子节点数据返回,通知组件数据加载完成
resolve(nodes)
}).catch((error) => {
console.error('Failed to fetch city info:', error)
resolve([]) // 在发生错误时,传递空数组给 resolve 函数
})
} else {
resolve([])
}
}
}
具体的获取数据的方法在methods(){}里,同时对数据进行格式化也是在这里
getCityInfo(pid) { //从服务器获取数据信息
return cityApi.getCityInfo(pid)
},
handleChange(value) {
//获取级联选择器的label数据
const labels = this.$refs['city'].getCheckedNodes()[0].pathLabels
对label的数据进行规格化
const concatenatedLabel = labels.join('')
this.productForm.proplace = concatenatedLabel
},
如果不进行规格化,现实的信息是:["河北省", "邯郸市", "丛台区"],进行规格化后是“河北省邯郸市丛台区”,具体要什么效果根据项目的需要进行配置,如果只要你选择的最后一个label,不要前面几级的数据,只用this.$refs['city'].getCheckedNodes()[0].label
就行了