vue 项目 多选 问题
2024-09-05 04:57:37
近期 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;
},
最新文章
- [LeetCode] Split Array Largest Sum 分割数组的最大值
- Windows Server 2008 R2 下配置证书服务器和HTTPS方式访问网站
- Mac 不能输入波浪线？
- ICTCLAS 汉语词性标注集
- hdu.1043.Eight (打表 || 双广 + 奇偶逆序)
- 使用网站websequencediagrams在线画时序图
- hdu 1166 敌兵布阵--BIT
- 只要项目是maven构建的，pom.xml中依赖的jar包全都默认去你电脑本地仓库去找
- UBIFS FAQ and HOWTO
- hdu 4578 Transformation（线段树）
- VC++ 获取windows系统的版本类型
- [转载]Web前端和后端之区分，以及面临的挑战
- oracle主机修改IP后客户端无法连接
- poj3417
- php + 和 array_merge的区别
- MySQL存储过程定义中的特性（characteristic）的含义
- centos 修改时区
- ThinkPHP5跨控制器调用
- POJ1269求两个直线的关系平行，重合，相交
- Eclipse编译快捷键