近期 vue 项目用到多选功能,引用的elementUI的级联多选 Cascader,但是没有效果。

后来发现是elementUI版本问题,我们项目用的是2.7.2版本,版本太低。

后来 卸载了 重新安装的 2.12.0版本的elementUi.

在后面中 添加  修改 批量修改的 多选框用的同一个组件。只需 判断他进入的是 添加 还是 修改或者批量修改

可以通过判断 该数据的id  新加的是没有id的  修改 有一个id  批量修改有多个id

刚开始进入页面 得到所有数据:

点击弹框按钮

根据点击的按钮不同 配置组件

openCallback(defObj, val) {
let title = "编辑分组";
// console.log(val)
let params = {
title: title,
open: true,
data: {
remark: val.remark || "",
riskType: val.riskType || "",
groupName: val.groupName || "",
// departmentName: val.departmentName || [],
id: val.id,
valid:val.valid || []
} }; if (val === "add") {
params.title = "新增分组";
delete params.id;
}
// 批量修改
// console.log(val)
else if (val === "update") {
// console.log( this.dialog.data) if (!this.dialog.data.tableSelectArr || this.dialog.data.tableSelectArr.length <= 0) {
this.warn("请选择要设置的敏感词");
return;
} else if (this.dialog.data.tableSelectArr.length > 100 || this.dialog.data.tableSelectArr.length == 1) {
return this.warning(
`单次最少允许分配[2]个敏感词,最多允许分配[100]个敏感词, 当前已选[${this.dialog.data.tableSelectArr.length}]个敏感词`
);
}
params.title = "批量修改";
params.data = {
remark: val.remark || "",
riskType: val.riskType || "",
groupName: val.groupName || "",
departmentName: val.departmentName || [],
id: this.dialog.data.tableSelectArr || []
};
}
this.dialog = params;
},

最后提交时,新增 修改 批量修改 提交不同的接口

在确定提交按钮中判断:

sureCallback(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
// console.log(this.dialog.data.id)
if (
this.dialog.data.id &&
typeof this.dialog.data.id.length == "undefined"
) {
this.editCallback();
} else if (this.dialog.data.id && this.dialog.data.id.length > 1) {
this.updateCallback();
} else {
this.addCallback();
}
} else {
return false;
}
});
},

在选择多选中,

因为新增 修改 批量修改 公用一套组件。这里 v-module 的值是从父组件传过来的,父组件根据不同的功能进行了配置。(见上面配置组件)

因为是拥有多级 多选,类似下图:

在向后台提交数据时,只提交最后一级即可。但是在修改时要勾选上原来拥有的数据,要绑定的是一 二 三 级(所有级)的 id (子节点和其所有父节点的id)

因为有多级批量修改,所以后台 返回的 数据的id 是个二维数组,在展示时,如果有,会默认勾选上该节点。 最里面的一层数组包裹的是子节点和其所有父节点的id,外面一层数组包裹的是要修改的多个用户。

在确认提交时,要遍历这个二维数组,只需拿到每个用户的最后一级子节点

getStaffValid(value){
// console.log(value)
let staffsId = []
value.forEach(function(v,i){
const staffs = value[i]
const staffId = staffs[staffs.length-1]
staffsId.push(staffId) })
// console.log(staffsId)
this.dialog.data.valid = staffsId }

即可。

在获取用户的数据展示多选按钮时,后台返回的是 多层 id,name,格式。例如

  [{
id:1,
name:'王一博',
children:[
{id:2,
name:'摩托',
children:[
{
id:3,
name:'滑板'
}
]}
]
}]

需要嵌套遍历,将id,name分别对应:value 和  label,格式如下:

   [{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海',
children: [
{ value: 3, label: '普陀' },
{ value: 4, label: '黄埔' },
{ value: 5, label: '徐汇' }
]
},]
}]

代码

 getStaff() {
v2riskManagementApi.getStaffId().then(data => {
// console.log(data);
const arr = (data || []).map(v => this.convertData(v.id, v.name, v));
// console.log(arr);
this.options = arr;
});
},
//
convertData(value, label, data) {
let dataObj = {
value,
label,
data
};
if (data.children && data.children.length) {
dataObj.children = data.children.map(v =>
this.convertData(v.id, v.name, v)
);
}
return dataObj;
},

vue 项目 多选 问题的更多相关文章

  1. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  2. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  3. vue项目实现记住密码到cookie功能(附源码)

    实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/ ...

  4. vue项目实战总结

    马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...

  5. 搭建vue项目环境

    前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...

  6. 使用Cordova打包Vue项目

    因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...

  7. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  8. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

  9. Vue项目用于Ios和Android端开发

    起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...

随机推荐

  1. php导出xls,报错:文件格式和扩展名不匹配。该文件可能已损坏或不安全。除非你相信它的来源,否则不要打开它。

    打开文件报错如下 在文件头加上如下代码 ob_end_clean(); header('Content-Type:application/vnd.ms-excel'); header('Cache-C ...

  2. npm启动报错

    npm 启动报错  event.js 160 报错原因: 端口号被占用 解决方法: 1.重新定义一个端口号. 2.任务管理器关掉node进程,重新运行npm.

  3. subsequence 2

    题目链接 题意:每次给出两个字母 和 只有这两个字母的原字符串的子序列,最后让你输出原字符串. 思路:先将字符转换为hash值,然后再转换成图,就是一个拓扑排序了,然后满足不了的情况有两种,一个是构造 ...

  4. Sqli labs系列-less-5&6 报错注入法(下)

    我先输入 ' 让其出错. 然后知道语句是单引号闭合. 然后直接 and 1=1 测试. 返回正常,再 and 1=2 . 返回错误,开始猜表段数. 恩,3位.让其报错,然后注入... 擦,不错出,再加 ...

  5. Python-字符串str和json格式的转换

    str转json str转换为json格式,前提一定需要保证这个str的格式和json是一致的,即左边最外层是大括号,右边的最外层是大括号.如果不一致,推荐用正则进行拆分至和json格式一致1. 通过 ...

  6. 20175223 《Java程序设计》第十一周学习总结

    目录 教材学习内容总结 代码调试中的问题和解决过程 1. Linux中编程实现计算器方法乘法报错,但 IDEA 中可以. [代码托管] 学习进度条 参考资料 目录 教材学习内容总结 因未熟练掌握第十章 ...

  7. MySQL 小数处理函数 round 和 floor

    一. 在mysql中,round函数用于数据的四舍五入,它有两种形式: 1.round(x,d)  ,x指要处理的数,d是指保留几位小数 这里有个值得注意的地方是,d可以是负数,这时是指定小数点左边的 ...

  8. javscript 实现iframe加载内容页出现LOADING效果

    <div id="load" align="center"> <img src="http://sc.cnwebshow.com/u ...

  9. Linux随笔 - DNS搭建

    域名系统(英文:Domain Name System,缩写:DNS)是因特网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网.DNS 使用TCP和UDP端口53 ...

  10. python学习笔记:文件操作和集合

    一.文件操作 文件读写步骤:有一个文件,打开文件,操作文件读写文件,关闭文件. python 文件读写模式r,r+,w,w+,a,a+的区别(附代码示例) 模式 可做操作 若文件不存在 是否覆盖 r ...