vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

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 {
	 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