vue之级联选择器选中拿到当前全部数据(elementU)
业务需求:应后台要求接收的数据是多个,在级联选择器中只能拿到指定的值,固解决如何拿到多个值传入后台。代码结构:<el-form-item label="分类"><el-cascaderv-model="formInline.classification":options="classificationOpt":props="{label: 'cloumName',value: '
·
业务需求:应后台要求接收的数据是多个,在级联选择器中只能拿到指定的值,固解决如何拿到多个值传入后台。
代码结构:
<el-form-item label="分类">
<el-cascader
v-model="formInline.classification"
:options="classificationOpt"
:props="{
label: 'cloumName',
value: 'id',
checkStrictly: true,
}"
clearable
ref="cascaderAddr"
@change="classChange" >
</el-cascader>
</el-form-item>
data () {
return {
classification:[],//接收的数组
formInline: {
classification: {}, // 分类显示
classifyValue: '' // 分类接收数据
}
}
},
// 获取分类选中数据
classChange () {
if (
this.$refs.cascaderAddr.getCheckedNodes() && this.$refs.cascaderAddr.getCheckedNodes()[0]
) {
const nodeContent = this.$refs.cascaderAddr.getCheckedNodes()[0].data
console.log(nodeContent )//这个位置可以打印一下
this.formInline.classifyValue = nodeContent
} else {
this.formInline.classifyValue = null
}
},
此时的你就可以拿到你选中的全部,然后在接口传值的时候将你于后台规定的字段填写正确即可,当添加了清除 clearable 时会在控制台报错,所以在change事件里进行判断。
//传入接口数据结构
chooseAttrDTO: {
cloumName: this.formInline.classifyValue.cloumName ? undefined : '',
cloumSign: this.formInline.classifyValue.cloumSign ? undefined : '',
id: this.formInline.classifyValue.id ? undefined : ''
}
总结:因为在element 组件级联选择器只能指定固定的值,如果用之前的写法只能拿到一个值,所以添加一个ref,使用getCheckedNodes()的方法来获取全部的数据。
更多推荐
已为社区贡献3条内容
所有评论(0)