vue+iview4.0 , vue+element实现下拉框可以自定义输入内容

前言：

        最近10月的时候 iview4.0 更新了，但是一直在忙也没用到，正好因为要实现一个下拉框里面我要自定义输入内容的效果，element里面是有这个效果，antd里面没有，因为本项目用的iview，也不能因为一个效果直接换框架，就更新项目中的iview到4.0版本了;

先看看效果图：

1、iview4实现的单选增加

2、element实现的多选增加

第一：用vue+iview4.0来实现

（注意4.0的相比较之前来说样式会有很多改变，个人认为最大的变化是两点，1是字体大小，宽度相比较之前来说大了一点，***2是icon里面新增了很多，也删除了很多，容易出现项目中之前使用的icon不能用了）

1、项目安装4.0的iview

npm install view-design --save

2、main里面配置

import ViewUI from 'view-design';

import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);

3、在我们使用的Select里面添加  filterable allow-create @on-create="handleCreate1"

filterable:  是否支持搜索
allow-create:  是否允许用户创建新条目，需开启 filterable
on-create 新建时候触发事件

<Select v-model="model17"
 filterable
 allow-create
 @on-create="handleCreate">
    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>


data:
cityList: [
            {
             value: '111',
             label: '111'
             }
          ],

methods: {
            handleCreate (val) {//val是新增加的数据
                this.cityList.push({
                    value: val,
                    label: val
                });
            },
        }

第二：用 vue+element 实现

1、项目安装element-ui

npm i element-ui

2、main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3、在我们使用的 el-select 中加上 filterable  allow-create 两个参数

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '测试1',
          label: '测试'
        }],
        value: []
      }
    }
  }
</script>

到这里就结束了，有兴趣的朋友欢迎留言一起交流