用el-select处理后台数据进行页面渲染
最近用select做下拉选择器的时候,出了一些bug。具体表现为无法从后台渲染数据到选择器中或者选择器中的文字不显示。
我的返回数据是这样的:
组件部分:
<el-select v-model="name" placeholder="请选择" @change="handleChange2()" clearable :options="options2"
:props="optionProps2">//v-model的值根据自己的需求绑定
<el-option
v-for="item in options2"
:key="item.name"
:label="item.name"
:value="item.name">//根据需要字自己选择字段,此处我需要绑定name
</el-option>
</el-select>
js部分:
export default {
data() {
return {
optionProps2: {
value: "name",
label: "name",
checkStrictly: true,
},
options2: [],
}
}
},
mounted() {
this.handleChange2();
},
methods: {
handleChange2() {
getName()//获取类型列表的接口
.then((res) => {
res.obj.forEach((item, index) => {
item.removeLoading = false;
});
this.options2=res.obj//这一步非常重要
})
.finally(() => {
this.tableLoading = false;
});
},
}
现在就成功啦!
本人也是刚起步学vue,花了挺长的时间才弄清楚。希望能帮到大家(有什么更好的方法也可以留言告诉我)