Form-select选择器

1、基本使用

v-model：当前被选中的el-option的 value 属性值

label：显示标签

value：option值

change事件： 选中值发生变化时触发 ，回调参数是目前的选中值

<el-select
    style="width: 150px"
    v-model="listQuery.onoff"
    placeholder="状态"
    size="medium"
    @change="handleFilter"
    clearable>
    <el-option label="上架" value="1"></el-option>
    <el-option label="下架" value="0"></el-option>
  </el-select>
<script>
  new Vue({
    el: '#app',
    data () {
      return {
        listQuery:{
          onoff: ''
        }
      }
    },
    methods: {
      handleFilter() {
        alert('select选项改变时触发事件')
      }
    }
  })
</script>

二、搜索、多选

filterable：开启搜索

multiple：启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式
展现，你也可以设置collapse-tags属性将它们合并为一段文字。

    <el-select v-model="value5" multiple placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
<!--margin-left：与左边的select保持20px距离-->
    <el-select
        v-model="value11"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value5: [],
                value11: []
            }
        }
    })
</script>

 

 

Select Attributes

参数	说明	类型	可选值	默认值
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false

Select Events

事件名称	说明	回调参数
change	选中值发生变化时触发	目前的选中值

Option Attributes

参数	说明	类型	可选值	默认值
：value	选项的值	string/number/object	—	—
：label	选项的标签，若不设置则默认与 value 相同	string/number	—	—
disabled	是否禁用该选项	boolean	—	false