Element UI实战教程之Select选择器组件的使用(下拉列表)06

Element UI实战教程之Select选择器组件的使用(下拉列表)06

Select选择器组件的使用(下拉列表)

1.组件的创建

  <el-select>
        <el-option>上海</el-option>
        <el-option>上海</el-option>
        <el-option>上海</el-option>
        <el-option>上海</el-option>
      </el-select>

2.属性的使用

<el-select v-model="selected" multiple clearable >
        <el-option  v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
      </el-select>
<script>
    export default {
        name: "Select",
      data(){
          return{
            options:[
              {id:1,name:"上海"},
              {id:2,name:"杭州"},
              {id:3,name:"北京"}
            ],
            selected:''
          }
      }
    }
</script>

 

 

关于element-ui组件的学习步骤

第一步:组件的基本创建

第二步:组件属性的基本使用

第三步:组件方法的使用