场景

要实现的效果如下

官方示例代码实现多选

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。

默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

<template><el-select v-model="value1" multiple placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-selectv-model="value2"multiplecollapse-tagsstyle="margin-left: 20px;"placeholder="请选择"><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: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value1: [],value2: []}}}
</script>

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

上面展示的实现效果首先在页面添加一个el-select并设置其为multiple支持多选

        <el-selectv-model="queryParams.czysz"placeholder="请选择操作员"multipleclearable:style="{ width: '200px' }"><el-optionv-for="dict in czyOptions":key="dict.userId":label="dict.userName":value="dict.userId"/></el-select>

这里在设置下拉框的数据源时使用的是czyOptions这个对象数组，需要提前声明

  data() {return {// 操作员字典czyOptions: [],

为了给此数据源赋值

需要在created方法中调用加载下拉框数据的方法

  created() {this.getUserList();},

调用getUserList方法请求后台数据

    getUserList() {//获取操作员数据listUser(this.user).then((response) => {this.czyOptions = response.rows;});},

其中listUser是请求后台数据的方法

将返回数据赋值给上面的对象数组。

这样通过对下拉框进行v-model数据绑定

 v-model="queryParams.czysz"

其中czysz是一个数组就能获取到下拉框的:value="dict.userId"绑定的value值的数组。

ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值相关推荐

select下拉框赋值和取值
jq的select常用的方法: 一.下拉框赋值: 1.已创建select的下拉框. ①选中option的value为jquery 例:$(&qu ...
Android中自定义xml文件给Spinner下拉框赋值并获取下拉选中的值
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
el select 清空_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 d ...
layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
js填充select下拉框并选择默认值
/* 使用json数组填充下拉框并复选 *//* 初始化下拉框数据 */ var jsonStr = { "data": [] }; for (var str in JsonStr ...
layui给select下拉框赋值
layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...
判断select下拉框是否有选,并给下拉框赋值
使用select下拉框时,错误写法 var sex = $('#sex').val(); alert(sex); //弹出的是:nullif(sex==""){alert(&quo ...
jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
js获得html下拉框的值,JavaScript如何获取select下拉框中第一个值
本文主要和大家介绍JavaScript实现获取select下拉框中第一个值的方法,涉及javascript针对页面元素属性的相关获取操作技巧,需要的朋友可以参考下,希望能帮助到大家. 1.说明获取s ...

ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值

场景

实现

ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值相关推荐

最新文章

热门文章