• elementUI select组件 默认选择第一项


    场景:后台返回最近医保年 5个年份的数据 [2019,2018,2017,2016,2015],将数据以props形式传入 searchForm组件 并以select形式作为搜索条件展示,默认选中最近一年

    情况一:已知select options数组 如下设置:

    export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: '选项1'
          }
        }
      }
    

      情况二:回到开始的场景

     处理数据

      =>将[2019,2018,2017,2016,2015] 转为符合 options的数据格式

      =>[{label:2019,value:2019},{label:2018,value:2018},{label:2017,value:2017},{label:2016,value:2016},{label:2015,value:2015}],

      =>子组件接收 options ,并设置v-model="value" 的value = this.options[0].value;

    父组件
    
    <template>
      <div class="hello">
          <item :options="resArr"></item>
      </div>
    </template>
    
    <script>
    import item from './a';
    export default {
      name: 'HelloWorld',
      components:{
        item
      },
      data () {
        return {
          optionArr:[2019,2018,2017,2016,2015],
          resArr:[]
        }
      },
      created() {
        this.init();
      },
      methods: {
        init(){
          for(var val of this.optionArr){
            this.resArr.push({label:val,value:val})
          }
    
        }
      },
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>
    
    
    子组件
    <template>
      <div>
        <el-select v-model="value" style="240px;" 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:'item',
        props:{
          options:{
            type:Array,
            default:()=>{
              return [];
            }
          }
        },
        data() {
          return {
            value:''
          }
        },
        created() {
          this.value = this.options[0].value;
        },
      }
    </script>
    
    <style scoped>
    </style>
    

      

      

        

  • 相关阅读:
    车厢调度
    字符串匹配问题x
    单词查找树
    【説明する】树
    计算(calc.cpp) 这题我搞了2晚上qwq
    [HDOJ4578]Transformation(线段树,多延迟标记)
    [Codeforces670A]Holidays(数学,构造)
    [Codeforces677C]Vanya and Label(组合数学,快速幂)
    [Codeforces677B]Vanya and Food Processor(模拟,数学)
    [Codeforces673C]Bear and Colors(枚举,暴力)
  • 原文地址:https://www.cnblogs.com/xiaomaotao/p/12364600.html
Copyright © 2020-2023  润新知