我就废话不多说了，大家还是直接看代码吧~





:key="item.Id"

:label="`${item.Name}/${item.Brand}/${item.Type}/${item.Spec}`"

:value="item.Id">











:key="item.Id"

:label="`${item.Name}/${item.Brand}/${item.Type}/${item.Spec}`"

:value="item.Id">





正常使用方法：正常使用方法：
:label=“item.label”
:label=“item.label”多个字段拼接：多个字段拼接：
:label="${item.Name}/${item.Brand}/${item.Type}/${item.Spec}"
:label="${item.Name}/${item.Brand}/${item.Type}/${item.Spec}"补充知识：element el-select 动态创建绑定属性，视图不更新之-连环填坑补充知识：补充知识：element el-select 动态创建绑定属性，视图不更新之-连环填坑项目需求是这样的：1. 在 a组件通过操作页面，请求拿到需要的data，然后将数据存在vuex 中，数据结构为多层嵌套结构大概如下
ceshi:[

{

values:[

{

value:[

{id:1,label:'哈哈1'},

{id:2,label:'哈哈2'},

{id:3,label:'哈哈3'}

]

},

{

value:[

{id:4,label:'哈哈4'},

{id:5,label:'哈哈5'},

{id:6,label:'哈哈6'}

]

}

]

}
]
ceshi:[

{

values:[

{

value:[

{id:1,label:'哈哈1'},

{id:2,label:'哈哈2'},

{id:3,label:'哈哈3'}

]

},

{

value:[

{id:4,label:'哈哈4'},

{id:5,label:'哈哈5'},

{id:6,label:'哈哈6'}

]

}

]

}
]在组件中通过获取vuex中的数据ceshi为数据源，
computed: {

...mapGetters(['ceshi'])
},
computed: {

...mapGetters(['ceshi'])
},然后在b组件中动态渲染数据,因为我需要动态绑定属性所以我在computed中创建动态变量结构
//数据渲染


//


computed: {

...mapGetters(['ceshi']),


form(){


return this.ceshi.map((val,index) => {

let values = val.values.map((val,index) => {

let json={value:""}

return json

})

let ojson = {values};

return ojson

})

}

}

//数据渲染


//


computed: {

...mapGetters(['ceshi']),


form(){


return this.ceshi.map((val,index) => {

let values = val.values.map((val,index) => {

let json={value:""}

return json

})

let ojson = {values};

return ojson

})

}

}
发现数据绑定成功，选择框变化数据也会变化，但是页面不改变，视图没有更新，通过在select代码中加入$set方法,也并没有用，视图同样没有更新；查看文档发现发现computer默认没有双向绑定 ，默认为getter 需要自己写setter函数，但是我发现,因为我的动态数据是我通过vuex 中的数据得来的，我也并没有定义其他的data，所以无法使用setter，于是进行修改如下
data() {

return {

form:[]
},
created () {

this.ceshi.forEach((val,index) => {

let values = val.values.map((val,index) => {

let json={value:""}

return json

})

let ojson = {values};

this.form.push(ojson)

})

}
data() {

return {

form:[]
},
created () {

this.ceshi.forEach((val,index) => {

let values = val.values.map((val,index) => {

let json={value:""}

return json

})

let ojson = {values};

this.form.push(ojson)

})

}结果报错，分析原因应该是，我并没有在a组件操作获取数据，但这个时候created函数运行于是报错了，修改逻辑为通过watch 监听ceshi 数据变化
ceshi: {

handler(newValue,oldValue) {

this.ceshi.forEach((val,index) => {

let values = val.values.map((val,index) => {

let json={value:""}

return json

})

let ojson = {values};

this.form.push(ojson)

})

},

deep: true

}
ceshi: {

handler(newValue,oldValue) {

this.ceshi.forEach((val,index) => {

let values = val.values.map((val,index) => {

let json={value:""}

return json

})

let ojson = {values};

this.form.push(ojson)

})

},

deep: true

}再看效果，发现解决了，记录如下，希望能帮助到您！以上这篇在Vue中使用Select选择器拼接label的操作就是小编分享给大家的全部内容了，希望能给大家一个参考。