el-option默认选择

工作记录

el-option默认选择

方式一

el-select绑定的字段赋初始值。

<template>
  <div class="ssss">
    <el-select v-model="value" placeholder="请选择">
      <el-option  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '黄金糕'
    }
  }
}
</script>
<style>
.ssss{
  width: 50vw;
  height: 500px;
  margin: 0 auto;
}
</style>

方式二

HTML
//query.applyLevel的值为鼠标选择不同下拉框绑定的value值

<el-select
                  size="small"
                  v-model="query.applyLevel"
                  placeholder="请选择类型"
                  style="width: 170px"
                >
                  <el-option
                    v-for="item in goodsArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
 </el-select>

Data

 query: {
        userMessage: "",
        applyLevel: "",
        status: "",
        createTime: "",
        endTime: "",
        date: "",
      },
      goodsArr: [
      //当 value: ""是，默认显示    label: "全部",
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "普通代理",
        },
        {
          value: "1",
          label: "高级代理",
        },
      ],