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"filterableallow-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-selectv-model="value"multiplefilterableallow-createdefault-first-optionplaceholder="请选择"><el-optionv-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>

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

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

vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
element 下拉框 el-select 自定义控制某项禁止选择
vue element 下拉框 el-select 自定义控制某项 el-option 禁止选择驾驶员,押运员不能同时选择同一个人例如:驾驶员选择张三押运员禁止选张三如果押运员选张三驾驶员 ...
Element Select下拉框选中后视图没有渲染等问题
Element Select下拉框选中后视图没有渲染等问题解决办法: 实质就是数据层级太深,当数据改变后,视图没有重新渲染,所以通过$forceUpdate() ,来强制刷新视图,重新渲染,这个比较 ...
网页下拉框智能诱导输入
<!-- /******************************************************************************************* ...
模糊搜索下拉框（可输入+自动匹配）
模糊搜索下拉框(可输入+自动匹配) 实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签,对应demo如下: <input list="browsers& ...
Vue使用distpicker插件实现省市级下拉框三级联动
前言这几天做项目,想着用一个全国省市区插件,之前就知道有几种,比如通过JSON文件生成对应的区域下拉框,element-china-are插件,包括distpicker插件今天主要介绍的是如何使用 ...
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑源码:https://gitee.com/charlinchenlin/ ...
vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器数据渲染通过 :options="options" 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ chec ...

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

前言：

先看看效果图：

1、iview4实现的单选增加

2、element实现的多选增加

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

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

1、项目安装4.0的iview

2、main里面配置

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

第二：用 vue+element 实现

1、项目安装element-ui

2、main.js

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

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

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

最新文章

热门文章