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