Element select下拉多选可搜索

文章描述:

element select下拉框可以搜索以及可以多选值

 

用法

filterable 是否可搜索

multiple 是否多选

clearable  是否可以清空选项

注意:el-select的v-model对应el-option的:key

<template>

  <div style="padding: 100px;">

        <el-select
          id="staff"
          v-model="selectedStaff"
          style="min-width: 50%"
          filterable
          multiple
          placeholder="请选择"
          size="medium"

        >
          <el-option
            v-for="option in options"
            :key="option.user_id"
            :label="`${option.name}-${option.code}`"
            :value="option.user_id"
          />
        </el-select>
        <el-tooltip placement="right">
          <div slot="content">注意:<br/>可以多选</div>
          <i class="el-icon-info" style="color:#186ed2;padding-left: 2px">规则提示</i>
        </el-tooltip>


        {{selectedStaff}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      options:[
        {user_id:1, name:'宇智波 · 斑', code:'001'},
        {user_id:2, name:'宇智波 · 鼬', code:'002'}
      ],
      selectedStaff:''
    }
  },
  created() {

  },

  methods:{

  }
}
</script>

 

发布时间:2023/11/02

发表评论