vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
基于element Transfer
http://element-cn.eleme.io/#/zh-CN/component/transfer
直接上代码
<template>
<div class="auth-user-list">
<el-breadcrumb separator="/">
<el-breadcrumb-item>XXXXX</el-breadcrumb-item>
<el-breadcrumb-item>编辑XXX</el-breadcrumb-item>
</el-breadcrumb>
<div class="content">
<div class="content-title">编辑XXXX</div>
<p style="text-align: center; margin: 0 0 20px"></p>
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block;height: 500px;"
v-model="value3"
filterable
filter-placeholder="请输入用户名称"
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['用户列表', '用户列表']"
:button-texts="['到左边', '到右边']"
@change="handleChange"
:data="data">
<el-button class="transfer-footer" slot="right-footer" size="small" @click="savaUser">保存</el-button>
</el-transfer>
<p style="text-align: center; margin: 0 0 20px"></p>
</div>
</div>
</div>
</template>
<style lang="less" rel="stylesheet/less">
.auth-user-list {
.block-header {
font-size: 12px !important;
margin-top: 5px;
}
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
.el-transfer-panel {
width: 300px;
}
}
</style>
<style lang="less" rel="stylesheet/less" scoped>
.search {
margin-left: 10px;
}
.page-block {
text-align: right;
margin-top: 10px;
}
</style>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 4; i++) {
data.push({
key: i,
label: `备选项 ${i}`,
disabled: i % 4 === 0
});
}
return data;
};
return {
realName: "",
groupId: $.trim(this.$route.params.groupId),
data: generateData(),
pinyin: [],
value3: [],
filterMethod(query, item) {
return item.pinyin.indexOf(query) > -1;
},
renderFunc(h, option) {
return (
<span>
{option.label} //页面展示的数据
</span>
);
}
};
},
watch: {},
computed: {},
methods: {
handleChange(value, direction, movedKeys) {
// console.log(value);
},
/**
* 获取列表数据
**/
getUserInfo: function() {
let me = this;
//清空数据
me.data = [];
me.value3 = [];
me.$ajax
.getUserInfoPage(
{},
{
type: "POST"
}
)
.then(users => {
if (users) {
users.res.forEach(function(c, index) {
me.pinyin.push(c.realname);
me.data.push({
key: c.rightUserId,
label: c.realname,
// disabled: i % 4 === 0
pinyin: me.pinyin[index] //添加数据时设置pinyin的索引
});
});
}
});
me.$ajax
.getUserInfoPageByGroupId(
{
realName: $.trim(this.realName),
groupId: $.trim(this.$route.params.groupId)
},
{
type: "POST"
}
)
.then(users => {
if (users) {
users.res.forEach(function(c) {
me.value3.push(c.rightUserId);
});
}
});
},
//保存用户关系
savaUser() {
this.$ajax
.savaUser(
{
userIdList: this.value3,
groupId: $.trim(this.$route.params.groupId)
},
{
type: "POST"
}
)
.then(res => {
this.getUserInfo();
this.$message({
type: "success",
message: "保存成功"
});
});
},
},
mounted() {
//加载用户信息
this.getUserInfo();
}
};
</script>
说明
1.代码中的 me.$ajax为自己封装的ajax组件 需要改成自己的ajax
2.首先调用mounted()中的 getUserInfo() 加载用户数据
3.data() 中的data为页面展示的数据
4.data() 中的value3保存的是ajax传递的数据
5.data() 中的 pinyin 为查询时的内容,需要注意当getUserInfoPage()查询后端返回的列表数据班车数据 名称应该和 me.pinyin[index]的
索引一致
6.getUserInfo 中触发了两个ajax可以进行优化
7.$message为引入的消息控件
8.未解决问题 const generateData 没有进行删除,删除后共多少人展示为0