this.formData.operator_id = this.operatorLists[0].id 这句要加在动态获取了列表之后,如下:
OperatorSelect() {
this.operatorSelect()
.then(res => {
this.operatorLists=res.data
this.formData.operator_id = this.operatorLists[0].id
.catch(err => {
this.$message.error(err.message)
第二种情况:
el-select静态获取数据, 默认选中第一个
<el-select
v-model="formData.status"
placeholder="请选择"
class="filter-item"
style="width: 130px">
<el-option
v-for="item in statusLists"
:key="item.key"
:label="item.status_name"
:value="item.id" />
</el-select>
data() {
return {
statusLists:[{id:1,status_name:'上线'},{id:2,status_name:'下线'}]
created() {
this.formData.status = this.statusLists[0].id
场景:后台返回最近医保年 5个年份的数据 [2019,2018,2017,2016,2015],将数据以props形式传入 searchForm组件 并以select形式作为搜索条件展示,默认选中最近一年情况一:已知select options数组 如下设置:export default {data() {return {options: [{value: '选项1',label: '黄金糕'},...
今天写项目,需要循环出select内的数据以后,页面一加载默认选中第一个数据,写完循环发现原本默认显示第一条的select框没变化,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,自己研究了一下,发现很简单,记录一下。
一.初始效果
<template>
<div class="statistical">
<span>请选择店铺:</span>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="项目状态:" prop="status">
<el-select :disabled="isRead" v-model="form.status" class="mySelect" popper-class="wentipingSe.
<el-form-item label="状态:" prop="state">
<el-select v-model="formData.state" placeholder="请选择用户状态">
<el-option
v-for="item in stateData"
:key="item.valu
<el-form-item label="接收对象" prop="receiveObject">
<el-select placeholder="请选择接收对象" style="width: 100%" v-model="queryParam.receiveObject">
<el-option
v-for="item in objectSelectOptions"
:key="item.value"
:label="item.l
本文目录1. 用途2. 数据绑定2.1 固定选项2.2 选项绑定数组3. 功能效果3.1 可清空选项3.2 多选3.3 可搜索4. 事件响应5. 小结
1. 用途
el-select即选择器,用于从若干个候选项中选择其中一个(或者多个)。
在传统网页开发中,选择器经常被称作下拉框、下拉列表,是最常用的表单元素之一。
2. 数据绑定
el-select的数据可以来源于固定的若干个选项,或者通过v-for绑定一个数组。
2.1 固定选项
固定选项时,选中项的value与selectedValue双向绑定。