v-model 绑定的数据类型与 el-option 中 value 属性的类型不匹配,可能导致选中内容无法正确显示。如字符串和数字类型不一致。 示例问题: data() { return { selectedValue: '', // 数据类型为字符串 options: [ { value: 1, label: '选项一' }, // 数据类型为数字 { value: 2, label: '选项二' }...
在数据库中存储数据为数字,而前端显示界面需要进行字符串类型展示 如在编辑页面需要回显数据,该如何进行转换呢? 1.在select中如下: <el-form-item label="性别"> <el-select v-model="userForm.sex" placeholder="请选择性别"> <el-option v-for="(item,key) in sexs" :key="key" :label="item.label...
如果选项值为字符串,就没有此问题。 进一步验证:Vue-dev-tool 中的组件展示,可以说明:输入值是字符串 '101',但是选项值是数字 101。因此才会造成该问题。 解决 思路一:只要让输入值是数字而非字符串即可。 尝试解决:v-model.number无效、网上搜索无效、分析el-select源码无果。 【推荐】思路二:让选项值为字符...
解决方式:绑定value值的时候在前面加上冒号, 不加冒号:要匹配的值必须是字符串才能正常显示下拉框的默认值,并且选择后框内显示数字; 加冒号:会根据字段值来判断属性的类型 代码如下: value加 : 效果如下: 正常显示 另外一种情况 下拉列表内容中的id为 字符串,table中的id为 整型,所以会出现不匹配的情况 下拉列...
// 下面value没有冒号,说明是字符串,只要给前面加上冒号就行了<Selectv-model="roleName"><Optionvalue=1>哈哈</Option><Optionvalue=0>呵呵</Option></Select>// 这里通过 :value 绑定了为数字<Selectv-model="roleName"><Optionv-for='item in items':value='item.value':key='item.value'>{{item...
// 将字符串转换为数字 return parseInt(numberPart, 10); }); console.log(numericArray); // 输出: [1, 2]。编辑确定操作时,入参给接口就行。 情况2 只把value当绑定值(正常都是这种形式) 新增时的逻辑 和情况1基本一致,只是label绑定项只给展示label值就行 ...
对于el-select的单选模式,其v-model绑定的值应该是一个非数组类型(如字符串或数字)。如果绑定的是数组,你需要更改为非数组类型。 错误的示例(绑定数组): vue <template> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value...
4. size:输入框尺寸,类型为字符串,可选值为medium / small / mini。 5. clearable:是否可清空,类型为布尔值,默认为false。 6. collapse-tags:多选时是否将选中值按文字的形式展示,类型为布尔值,默认为false。 7. multiple-limit:多选时用户最多可以选择的项目数,类型为数字,默认为0(不限制)。 8. name: ...
1.value:指定el-select当前选中的值,可以是一个字符串、一个数字或一个对象。 2. options:指定el-select中的选项列表,可以是一个静态数组或一个动态数组。 3. clearable:指定是否可以清空当前选中值,默认为false。 4. placeholder:指定当未选择任何选项时显示的占位符。 5. change事件:当选中值发生改变时触发的...
废话不多说 直接上图。使用el-select出现回显的问题， 经过查阅发现是因为value值的类型为字符串导致的。只要把value的类型转换成数字就可以正常显示了