element ui Select 选择器编辑回显问题

奈何桥上哈啤酒

已于 2023-04-10 14:58:21 修改

阅读量1k

点赞数

文章标签： vue.js elementui javascript

于 2023-02-22 17:08:38 首次发布

本文链接：https://blog.csdn.net/Yangpengxunb/article/details/129166226

版权

这段代码展示了在Vue.js中如何使用el-form-item和el-select组件创建一个选择器，并通过v-model绑定数据。当form.value与options中的value匹配时，选择器会默认选中相应的选项。在回显数据时，需确保form.value的类型与options的value一致，可以使用String()或Number()转换方法。

摘要由CSDN通过智能技术生成

<el-form-item label="关系：">
       <el-select  v-model="form.value" placeholder="请选择">
                <el-option 
                    v-for="(item,indexs)in options" 
                            :key="item.indexs" 
                            :label="item.label"
                            :value="item.value">
                 </el-option>
        </el-select>
</el-form-item>

data() {
        return {
                form：{
                    value:'',
                        },
                options: [{
                            value: '1',
                            label: '夫妻'
                            }, {
                            value: '2',
                            label: '父子'
                            }, {
                            value: '3',
                            label: '父女'
                            },],
                }
        }

选择的时候form.value是options的value值，编辑回显的时候form.value值和options的value值一样就可以默认选中，

例如：回显时，form.value是1，选择器就就会默认选中"夫妻"

注意：回显时，一定要注意form.value类型，可以调用String（）和Number（）方法