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