el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除
前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码
<template>
<el-dialog top="2vh" title="资质选择" :visible.sync="dialogFormVisible" width="80%">
<el-form :model="form">
<div class="line">
<el-form-item label="资质名称" :label-width="formLabelWidth">
<div class="select-inline">
<el-select
size="small"
value-key="id"
@change="qualificationChange"
v-model="form.selectArr[0]"
placeholder="请选择"
@click.native="changeIndex(0)"
>
<el-option
v-for="item in qualifications"
:key="item.id"
:label="item.dname"
:value="item"
></el-option>
</el-select>
<template v-for="(qitem,qkey) in qualificationsArr">
<el-select
@change="qualificationChange"
value-key="id"
size="small"
:key="qkey"
v-model="form.selectArr[qkey+1]"
@click.native="changeIndex(qkey+1)"
>
<el-option label="全部" :value="{id:0}"></el-option>
<el-option
v-for="qchildren in qitem"
:key="qchildren.id"
:label="qchildren.dname"
:value="qchildren"
></el-option>
</el-select>
</template>
</div>
</el-form-item>
<el-form-item class="forms" label="资质条件" :label-width="formLabelWidth">
<div class="qualification-condition">
<div v-for="(citem,ckey) in getCheckList" :key="ckey" class="condition-item">
<div>{{ckey+1}}.{{citem.name}}</div>
<div
class="condition-item-children"
v-for="(ichildren,ickey) in citem.children"
:key="ickey"
>
<div class="condition-item-name">{{ichildren.name}}</div>
<div class="condition-item-delete" @click="deleteCheck(ichildren)">
<i class="el-icon-close"></i>
</div>
</div>
</div>
</div>
</el-form-item>
</div>
<div class="lines">
<el-form-item label="列表筛选" :label-width="formLabelWidth">
<el-input style="width:20%;" v-model="searchKeyword" placeholder="找不到?搜一下吧"></el-input>
<div class="q-list">
<template v-for="(qitem,qkey) in getFilterList">
<el-checkbox
style="margin:0 0 0 20px"
@change="(val)=>checkBoxChange(val,qitem)"
:key="qkey"
v-model="qitem.checked"
>{{qitem.name}}</el-checkbox>
</template>
</div>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="search">搜索</el-button>
<el-button @click="clearAll">清空</el-button>
</div>
</el-dialog>
</template>
下面就是script部分
import axios from "axios";
export default {
data() {
return {
searchKeyword: "",
dialogFormVisible: true,
qualifications: [], //资质
qualificationsArr: [],
qualificationList: [], //资质列表
formLabelWidth: "70px",
index: 0,
form: {
selectArr: [{}]
},
checkList: []
};
},
created() {
var params = new URLSearchParams();
params.append(
"token",
"4b68KDt5yOIvnNYPniwP78Qc9ho0i1U2y86kebxC1OYpqI5r5LQh7CE50hVUVXlg47Ze6IN7d7jOkRKBH3cgRCPA5ixmzyJwAm8PAw"
); //传给后台的参数值 key/value
params.append("login_company_id", 0);
params.append("login_user_id", 496);
axios({
method: "post",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
url:
"http://115.28.156.246/BuildBidNew/public/index.php/firm/Firm_search/getQualiDict",
data: params
}).then(({ data }) => {
if (data.status == "success") {
this.qualifications = data.rows;
} else {
this.$message.error("出现错误");
}
});
},
methods: {
clearAll() {
this.qualificationsArr = [];
this.qualificationList = [];
this.checkList = [];
this.form.selectArr = [];
this.index = 0;
this.searchKeyword = "";
},
//删除已选中的
deleteCheck(item) {
this.qualificationList.find((value, key) => {
if (value.id == item.id) {
item.checked = false;
this.$set(this.qualificationList, key, item);
return true;
}
}); this.checkList.find((val1, key1) => {
if (val1.id == item.id) {
this.checkList.splice(key1, 1);
return true;
}
});
},
checkBoxChange(val, item) {
//刷新界面
this.qualificationList.find((value, key) => {
if (value.id == item.id) {
item.checked = val;
this.$set(this.qualificationList, key, item);
return true;
}
});
//使用新数组存选择结果
if (
!this.checkList.find((val1, key1) => {
if (val1.id == item.id) {
this.checkList.splice(key1, 1);
return true;
}
})
) {
this.checkList.push(item);
}
},
changeIndex(index) {
this.index = index;
},
qualificationChange(item) {
//删除更改后面的
this.form.selectArr.splice(this.index + 1);
this.qualificationsArr.splice(this.index);
if (item.children && item.children.length > 0) {
if (item.children[0].last == 0) {
this.form.selectArr.push({ id: 0 });
this.qualificationsArr.push(item.children);
}
}
this.generateList();
},
//生成列表
generateList() {
let preStr = "";
for (let item of this.form.selectArr) {
if (item.dname) {
preStr += item.dname + " / ";
}
}
this.qualificationList = []; if (this.form.selectArr[this.form.selectArr.length - 1].dname) {
this.getList(
preStr,
this.form.selectArr[this.form.selectArr.length - 1]
);
} else {
this.getList(
preStr,
this.form.selectArr[this.form.selectArr.length - 2]
);
}
},
getList(preStr, item) {
for (let citem of item.children) {
if (citem.children) {
this.getList(preStr + citem.dname + " / ", citem);
} else {
let checked = this.checkList.find(val => {
return val.id == citem.id;
});
if (checked) {
citem.checked = true;
} else {
citem.checked = false;
}
citem.name = preStr + citem.dname;
this.qualificationList.push(citem);
}
}
},
//搜索回调
search() {
this.$emit("on-search", this.checkList);
}
},
computed: {
//根据搜索内容筛选
getFilterList() {
let reg = new RegExp(".*" + this.searchKeyword + ".*");
return this.qualificationList.filter(val => {
return reg.test(val.name);
});
},
//获取选中的内容
getCheckList() {
let checkData = this.checkList.filter(val => {
return val.checked;
});
let arr = [];
for (let item of checkData) {
//得到一级
let match = /^(.*?)[\s]\//.exec(item.name);
let fname = match[1];
//查找是否有相同一级
let arrItem = arr.find(val => {
return val.name == fname;
});
if (arrItem) {
arrItem.children.push(item);
} else {
arr.push({ name: fname, children: [item] });
}
}
return arr;
}
}
};
样式部分可随自己的想的写,这里就不写出来了
写出了结果大概就是这样:
不喜勿喷,,有需要完善的地方还请指教
el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除的更多相关文章
- element-- 修改MessageBox 弹框 中确定和取消按钮顺序
需求:修改弹框中的 取消/确定按钮顺序,及头部和底部背景颜色; 原ui效果图 需求ui效果图 方法:对取消及确定按钮自定义类名,样式重写
- 在弹框中获取foreach中遍历的id值,并传递给地址栏(方法2)
1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...
- 在弹框中获取foreach中遍历的id值,并传递给地址栏。
1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢. 2. 点击取现按钮,如果没有设置密码->弹框 3. 点击去设置 ...
- 弹框中的elment-form在弹框重新打开后,怎么初始化验证信息
如果弹框关闭前有错误提示,弹框重新打开,由于没重新刷新页面,该错误还是存在.... 解决办法:弹框中的内容写成一个组件,prop接收父元素弹框的状态,并监听且reset表格 1. cnpm insta ...
- layer.open弹框中的表单数据无法获取
layer.open弹框中的表单数据无法获取 表单数据模板 layer.open() 页面效果: 当点击确定后,radio和textarea获取的值总是为空,解决办法: var setPriCustB ...
- 下拉框——把一个select框中选中内容移到另一个select框中遇到的问题
在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...
- 创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息。
创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息. <html> & ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- layer的iframe弹框中父子元素的传值
项目中,左侧导航树,右侧是 iframe 嵌套的页面,在右侧页面中又有layer弹框,可以说是有两层 iframe 框架. 所以查询网上的parent什么的方法都不能用.自己摸索的下面的方法: 1.父 ...
随机推荐
- 通过银行卡的Bin号来获取银行名称
/** * 通过银行的Bin号 来获取 银行名称 * @author 一介草民 * */ public class BankUtil { public static void main(String[ ...
- python 前端技术
生活中浏览器就是一个客户端,根据搜索内容向不同的服务器发送请求,但是显示最终页面后与请求的服务器断开,想再次看到搜索内容时需要重新连接. 服务端: import socket def handle_r ...
- zookeeper 单机部署
第一步:下载安装包 这里以3.4.11为例 https://archive.apache.org/dist/zookeeper/ 点进去看: 下载tar文件 第二步:上传到服务器 使用ftp工具上传 ...
- 实现子数组和绝对值差最小 - Objective-C
类似于背包问题,前提条件是数组全是正整数和0,先求和Sum,再从子数组中找出接近Sum/2的子数组 @interface TempState : NSObject @property (nonatom ...
- OpenGL ES 学习笔记 - Overview - 小旋的博客
移动端图形标准中,目前 OpenGL ES 仍然是比较通用的标准(Vulkan 则是新一代),这里新开一个系列用于记录学习 OpenGL ES 的历程,以便查阅理解. OverView OpenGL ...
- OpenSSL 生成自定义证书
前言 本文用来记录通过OpenSSL生成自定义证书并在浏览器设置可信任 准备 Linux CentOS7 系统 nginx 1.12.2 Windows 10 IE 11 chrome 71 Open ...
- 使用python模拟登录网易邮箱网站
环境要求 python 3.6 chromedriver.exe 文件 人工登录 人工登录某个网站,首先需要用浏览器打开登录页面,然后在输入框中输入对应的账号和密码,最后点击登录,以下使用代码模拟以上 ...
- 一天速成Python教程
一.Python基础 Python是对象有类型,变量无类型的动态类型语言,追求简单优雅易读.可以在终端中逐行运行,也可以编写成大型的面向对象的工程.在开始写之前,注意Python 2.X中,开头要写上 ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端
导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...
- PyMuPDF库(处理PDF)
昨天在公司需要把一份PDF格式认证表转换为图片JPEG格式,所以在网上查询了一些与此相关的python库,最后看网上大多都是使用Wand和PyMuPDF,在安装了Wand库后,导入相应的模块后报错了, ...