vue element select多选回显
我们经常在使用 Element组件里面的 select多选
场景:添加账号的时候需要选择可见分公司(分公司为多选),添加成功之后可以编辑,需要回显添加时所提交的分公司
代码如下:
多选框:
data(){
return{
companyIds: "", //分公司数据id
companyList: [], //分公司列表
companyListAll: { id: "", visibleCompany: "全部" }, //分公司列表
ruleForm: {
company: [], //分公司
},
}}
<el-form-item label="可见分公司:" prop="company">
<el-select
v-model="ruleForm.company"
multiple
collapse-tags
@change="changCompany"
placeholder="请选择可见分公司"
>
<el-option
v-for="item in companyList"
:key="item.id"
:label="item.visibleCompany"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
获取分工公司接口时:
添加一个全部的选项,拼接到分公司里面去,然后把分公司的id 循环取出来(因为向后台传输数据的时候需要传id)
this.$http
.post("/crm/customer/visibleCompanyList")
.then(response => {
//分公司数据
this.companyList = response.data.result;
this.companyList.unshift(this.companyListAll);
let ids = [];
this.companyList.map(item => {
ids.push(item.id);
this.companyIds = ids;
});
})
.catch(res => {
console.error("请求失败", res);
});
//给分公司赋值
changCompany(val) {
let allValues = [];
allValues = this.companyIds; const oldVal =
this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : [];
// 若是全部选择
if (val.includes("")) this.ruleForm.company = allValues;
// 取消全部选中 上次有 当前没有 表示取消全选
if (oldVal.includes("") && !val.includes("")) this.ruleForm.company = [];
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes("") && val.includes("")) {
const index = val.indexOf("");
val.splice(index, 1); // 排除全选选项
this.ruleForm.company = val;
}
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
if (!oldVal.includes("") && !val.includes("")) {
if (val.length === allValues.length - 1)
this.ruleForm.company = [""].concat(val);
}
// 储存当前最后的结果 作为下次的老数据
this.oldSearchJobType[0] = this.ruleForm.company;
},
以上代码就完成了多选编辑回显的功能,点击确认编辑的时候
vue element select多选回显的更多相关文章
- thymeleaf单选回显,多选回显,选回显,下拉默认选中第一个
//默认选中第一个<input type ="radio" name="repaymentType" th:each ="repaymentTy ...
- 基于TCP协议 I/O多路转接(select) 的高性能回显服务器客户端模型
服务端代码: myselect.c #include <stdio.h> #include <netinet/in.h> #include <arpa/inet.h> ...
- Vue + Element 实现多选框选项上限提示与限定
上图先,看效果!!! //vue文件夹内<el-form :model="form" class="form-inline"> <!-- :s ...
- Vue+Element+Select获取选中的对象
案例演示:获取select当前选中的所有内容 <el-select v-model="value8" filterable placeholder=&qu ...
- HTML、jsp页面中radio,checkbox,select数据回显功能,默认被选中问题
最近常常遇到各种复选框.单选框.下拉框的默认被选中的问题,开始也是绞尽脑汁的想办法,今天写一篇学习总结的博文来写一下学习总结. 单选框(radio)默认被选中: 一.jstl技术进行回显 <in ...
- Element Select 回显
有思考有痛点的朋友可以聊聊(要求:认真看过Element相关文档,对该场景自己有过多角度的探索) 下拉框回显的关键点:要回显的值包含于下拉列表的数组中 demo图 最近遇到一个需求抽象下:循环中下拉框 ...
- vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
业务的需要:我要对与会人员勾选,记录所选的与会人员,并且点击到别的页面上时也要记录所勾选的.第一次尝试,每次点击下一页数据都会清空.然后我就去element ui官网查看了api.实现如下: 在tab ...
- 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化
之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...
- vue 运用ElementUI,做select下拉框回显
第一.加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显. 第二.要保证select下拉的ID和v-model里边的id保持一致. 第三.elementUI就会自动的将数据回显了. ...
随机推荐
- Ceph学习笔记(4)- OSD
前言 OSD是一个抽象的概念,对应一个本地块设备(一块盘或一个raid组) 传统NAS和SAN存储是赋予底层物理磁盘一些CPU.内存等,使其成为一个对象存储设备(OSD),可以独立进行磁盘空间分配.I ...
- AJ学IOS(10)UI之_NSTimer_ios计时器
AJ分享,必须精品 先看效果 代码 #import "NYViewController.h" @interface NYViewController () <UIAlertV ...
- stand up meeting 11/27/2015-11/29/2015
part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 确定释义显示方案并进行代码实现: 4 完成UI设计的各项动能按钮的代码实现 6 数据库 朱玉影 导入了4 ...
- Python - 翻译Talk Python To Me (和我聊Python) 播客
“和我聊Python”是一个美国的聊天播客,英文名Talk Python To Me,类似于喜马拉雅的音频课程节目,只不过这个主题是编程语言Python.该节目从2015年的节目到现在,已经超过256 ...
- asp.net core webapi 配置跨域处理
在Startup.cs文件中的ConfigureServices方法中加入如下代码: //配置跨域处理 services.AddCors(options => { options.AddPoli ...
- Laravel异步队列全攻略
最近项目需求,研究了laravel的异步队列.官方文档虽然很是详细,但也有些晦涩难懂,在此记录下步骤,供大家参考. 1.修改/config/queue.php文件 <?php return [ ...
- [源码分析] 带你梳理 Flink SQL / Table API内部执行流程
[源码分析] 带你梳理 Flink SQL / Table API内部执行流程 目录 [源码分析] 带你梳理 Flink SQL / Table API内部执行流程 0x00 摘要 0x01 Apac ...
- js中string转map的方法
例如: var r = "{'msg':'你好'}" ; var map = eval("("+r+")"); //r为String类型的数 ...
- [nodejs] 同步/异步创建多层目录
背景 有时项目里需要同时创建多层目录的功能,但低版本的nodejs并没有提供快捷的api 尽管在v10.12.0版本 mkdir() 第二个参数支持recursive 参数,为true时能递归创建,但 ...
- sqli lab less-5-6
less-5 基于报错的注入 基于报错可以爆出当前数据库名等等 id=2' and extractvalue(1, concat(0x7c,(select user())));-- # ?id=2' ...