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