效果图预览:

å¨è¿éæå¥å¾çæè¿°

 代码参考如下:

<el-cascader
	ref="cascaderAddr"
	:options="addressOptions"
	change-on-select
	v-model="form.areaCode"
	@blur="handleAddressFun"
></el-cascader>

<script>
const thsAreaCode='' // 拼接 三级联动地址代码
		// 三级地址选择
		handleAddressFun: function(e,form,thsAreaCode){
			// thsAreaCode = this.form.areaCode    // 注意1:获取value值
			thsAreaCode = this.$refs['cascaderAddr'].currentLabels    //注意2: 获取label值
			alert(thsAreaCode)  // 注意3: 最终结果是个一维数组对象

		},
</script>

 

注意:如上述代码:

  • 先给级联选择器ref=""重命一个新组件名为cascaderAddr
  • 然后,使用this.$refs['新组件名'].currentLabels

 this.$refs['新组件名'].currentLabels 在2.7版本给移除了 可以通过this.$refs['件名'].getCheckedNodes() 获取到选中的节点 

 

spokesmanIdChange(e) {

console.log('666', this.$refs['cascaderAddr'].getCheckedNodes()[0].label)

console.log("选择大会", e);

},

 

效果图

如果我的内容对你有帮助,欢迎投食(dashang)。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐