element-ui 穿梭框使用axios数据查询
需求:使用element-ui的穿梭框,发送ajax向服务器查询数据,我这里以查询姓名为例子
由于穿梭框自己的那个搜索框并不满足我们要达到的条件,所以我自己写了一个输入框input去覆盖在原来的搜索框上面,当每次用户输入的时候,就拿到用户输入的内容传递给后端去查询,最后在显示出来
option.realName是姓名,option.loginId是工号,可在<span slot-scope="{ option }">{{ option.realName || '' }} - 工号: {{ option.loginId || '' }}</span> 根据自己的需求显示结果
html部分
<div style="text-align: center" class="el-transfers">
<el-transfer
style="text-align: left; display: inline-block"
v-model="value4"
:props='propss' //数据源的字段别名
:titles="['待选人员', '已选人员']"
:button-texts="['移除', '添加']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data" //Transfer 的数据源
>
<span slot-scope="{ option }">{{ option.realName || '' }} - 工号: {{ option.loginId || '' }}</span>
</el-transfer>
<el-input class="search" @input="querySearchAsyncs()" placeholder="请输入搜索姓名" prefix-icon="el-icon-search" v-model="input"> </el-input>
</div>
css部分:
.el-transfers{
position: relative;
.search{
position: absolute;
top: 56px;
left: 16px;
z-index: ;
width: 168px;
height: 32px;
.el-input__icon{
line-height: 32px;
}
.el-input__inner{
width: 168px;
height: 32px;
border-radius: 16px;
}
}
}
data部分:
propss:{
key:'id',
label:"realName"
},
data: [],
input:'',
value4:'',
newArray:[]
js部分:
handleChange(username, direction, movedKeys){
// username点击添加到右边框的数据
//初始化
this.addUser = username;//这是一个id数组
// 根据添加到右手边的id去data总数据里面找到这条数据,把它拷贝一份到一个新的数组中去
for(let i=;i<this.addUser.length;i++){
for(let n=;n<this.data.length;n++){
if(this.addUser[i] == this.data[n].id){
this.newArray.push(this.data[n]) //用一个新的数组装起来,当我清空搜索框输入内容,进行它搜索时,需要把以前添加在右边的数据(newArray)重新放回到data里面去
}
}
}
},
querySearchAsyncs() {
if(this.input != ""){
setTimeout(()=>{
this.$axios.post('/admin/permission/administrator/user/list',{
userId: this.tool.getCookie("userId"),
sessionId: this.tool.getCookie("sessionId"),
sql: {
fields:"id,loginId,realName",
current: , //当前第几页
pageSize:, //一次性拿到100条数据
searches: {
realName:this.input, //这是我传给后端需要查询的名字
}
}
}).then(res=>{
if(res.errorCode == ){
this.data = res.result.data //后端给我一百条数据对象,首先先放在data里面显示出来
//如果newArray里面有数据,遍历之前添加到右边的所有数据,追加到总数的后面
this.newArray.forEach((e)=>{
this.data.push(e)
})
//将this.data里面的数据去重
let data = this.data
// 根据id去重
var arr1=data.filter(function(element,index,self){
return self.findIndex(el=>el.id==element.id)===index
})
// 把去从后的数据重新赋值给穿梭框
this.data = arr1
}
})
},)
}
},
element-ui 穿梭框使用axios数据查询的更多相关文章
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- element ui input框不能输入的问题(实时学习)
解决: 在input的上面添加数据v-model 既可以 1.菜单中api (2018年8月14号) :default-active 默认根据当前路由选中菜单,值需要和 el-submenu 的属 ...
- 修改vue element Transfer 穿梭框里内容区的宽度
<template> <el-transfer v-model="value1" :data="data"></el-transf ...
- Vue Element ui密码框校验
<el-form-item prop="repeat_Password" class="userName_color"> <el-input ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- 解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找
做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...
- krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦
博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构 ...
随机推荐
- 软件工程--团队项目选择与NABCD
目录 Part1:项目说明 项目基础 我们的目标 Part2:项目NABCD Need Approach Benefit Competitors Delivery & Data Deliver ...
- Win10电脑桌面壁纸自动变成黑色无法更换怎么解决
很多用户在升级到win10之后,发现在使用过程中经常会碰到一些问题,就是电脑桌面壁纸总是会自动变成黑色,而且无法设置桌面背景壁纸,这是怎么回事呢,出现这样的问题可能是因为系统不是正版,或者是电脑设置不 ...
- 微信小程序全局设置分享内容
微信小程序每个页面都可以在onShareAppMessage中设置分享内容,如果想要全局设置成一样的分享内容如何设置呢? 在app.js中新增以下方法: //重写分享方法 overShare: fun ...
- windows如何查看jdk的安装目录
1.检查电脑上是否安装了JDK可以在cmd窗口输入java -version查看是否需安装了JDK 2.查看JDK的安装目录 一种是在cmd窗口输入java -verbose,查看最后一行即为JDK安 ...
- pip install --upgrade urllib3==1.25.2
pip install --upgrade urllib3==1.25.2 pip 安装,更新模块 moudle_name:是对应的模块名:请自行更换为自己需要更新的模块名 查看所有可更新的模块: ...
- XNOR-Net:二值化卷积神经网络
https://www.jianshu.com/p/f9b015cc4514 https://github.com/hpi-xnor/BMXNet BMXNet:基于MXNet的开源二值神经网络实现 ...
- 003 Vue动画
一: 0.说明 在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义 ...
- Linux_CentOS下搭建Nodejs 生产环境-以及nodejs进程管理器pm2的使用
nodejs安装:https://www.cnblogs.com/loaderman/p/11596661.html nodejs 进程管理器 pm2 的使用 PM2 是一款非常优秀的 Node 进程 ...
- echo * 和ls *之间的区别?
背景描述: 今天 一同事做入职考试,涉及到1题目,echo * 和ls *之间的区别,没有用过这个用法,再次记录下. 操作过程: 1.执行echo * [root@localhost ~]# echo ...
- 接口测试01- Jmeter-线程进程-环境变量
1.1 概念 JMeter 是 Apache 组织使用 Java 开发的一款测试工具 ,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文件.Java ...