问题描述：
（一）、数据分为三部分：
（1）库表获取全部数据集合A（key：label的数组），
（2）库表获取Target数据集合B（只有A中的key值数组） ，
（3）Source显示Target中不存在的key对应的数据C（key：label的数组）；
（二）待解决问题：
Target数据已获取，即[a,b,c]，全部数据已获取，即[{a：AA}，{b:BB}，{c:CC}，{d:DD}，{e:EE}]，如何处理能将AA、BB、CC显示在Target框内，将DD、EE显示在Source；当点击“到左边”、“到右边”按钮时，数据能正常加载？
现存Js代码：
<template>
<el-dialog
title="权限"
:close-on-click-modal="false"
:visible.sync="visible">
<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="dataForm.value"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:titles="['Source', 'Target']"
:button-texts="['到左边', '到右边']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="dataForm.source">
<span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
</el-transfer>
<div id = "target">
{{this.dataForm.value}}
</div>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<style>
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
</style>
<script>
export default {
data () {
return {
userId: '',
visible: true,
target: [], // 存储用户接口表查询的数据
allsour: [], // 所有接口服务
dataForm: {
value: [],
source: [] // 存储左选框剔除用户接口表<右选框>的ServiceID的数据作为备选项
}
}
},
methods: {
init (id) {
this.userId = id || 0
// 获取第三方所有接口信息
this.$http({
url: 'http://127.0.0.1:9050/sysServeInfo/getPageList?rows=0&page=0',
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
// 第三方接口信息数据
const services = data.data
for (let i = 0; i < services.length; i++) {
this.allsour.push({
key: services[i].serviceIdstr,
label: services[i].serviceName
})
}
const allsour = this.allsour
// 初始化右选框 取值于<用户接口表>
this.$http({
url: this.$http.adornUrl(`/sys/user/intfa/${this.userId}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < allsour.length; j++) {
if (data[i] === allsour[j].key) {
this.target.push({
key: allsour[j].key,
label: allsour[j].label
})
}
}
}
// target表示用户接口表查询的信息:key,label
const target = this.target
// Observer对象转数组
const targetArr = JSON.parse(JSON.stringify(target))
for (let i = 0; i < targetArr.length; i++) {
// 将用户接口表的信息初始化至右选框
this.dataForm.value.push(targetArr[i].key)
}
console.log(this.dataForm.value)
// 初始化左选框 测试完成
for (let m = 0; m < allsour.length; m++) {
let flag = true
for (let n = 0; n < target.length; n++) {
if (allsour[m].key === target[n].key) {
flag = false
break
}
}
if (flag) {
this.dataForm.source.push({
key: allsour[m].key,
label: allsour[m].label
})
}
}
})
})
},
handleChange (value, direction, movedKeys) {
console.log(value, direction, movedKeys)
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/sys/user/auth`),
method: 'post',
data: this.$http.adornData({
'user_id': this.userId,
'intfac_ids': this.dataForm.value
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script>
请大神 指教，谢谢！