element UI el-select 绑定值为对象时设置默认值
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
适用场景描述:在项目中实现编辑功能时,如页面存在下拉框且下拉框的数据在点击相应的select时进行调用( 在编辑时可能需要修改部分数据,而且存在部分下拉数据并不是必选项,如果直接获取所有的下拉数据,可能会造成浪费 ),需要在下拉框内显示已有的值作为默认值,如图所示(以官网给的数据为例):
绑定值为字符串:
如果只是需要数据的单个值,例如:value时,直接把值绑定给value就可以。
代码:
页面代码:
<el-select v-model="value" placeholder="请选择" @change="getItem(value,'radio')">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
js:
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '选项1'
}
},
methods:{
getItem(obj, type) {
console.log(obj);
console.log(type);
},
}
}
</script>
以上代码只是最简单的实现方式,但是项目中往往会遇到下拉选中的数据需要的不止其一个属性,这时候需要拿到整个对象才能实现。
绑定值为对象:
添加value-key作为唯一性标识,把value绑定的值改为整个对象。
思路:绑定单个属性时,设置默认值可以在options(下拉框数据集合)值为空的情况下实现,但是绑定值为对象,如果需要在不请求接口获取下拉集合的情况下设置默认值的话,则无法正常显示,此时只需要把已获取的默认值整合为一个对象放在options的集合内即可实现对象的默认值,在点击下拉框时再请求接口数据进行下拉框数据集合的重新赋值,具体实现如下所示:
<el-select v-model="value1" placeholder="请选择" value-key="value" @change="getItem(value1,'checkbox')">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
</el-option>
</el-select>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}],
value1: {
value: '选项1',
label: '黄金糕'
}
}
},
methods:{
getItem(obj, type) {
console.log(obj);
console.log(type);
},
}
}
</script>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)