一、首先还是在template中使用element-ui组件库当中的Transfer,坑的地方来了,这个:data当然没问题,绑定我们从后台异步获取到的数据,它会显示在穿梭框的左侧,这个v-model就是初始化右侧的值,但是这个v-model他是根据我们:data里面的key来判断哪些值在右侧的。然而elemet官方文档并没有说清楚,导致捣鼓了很长时间才解决。所以我们添加data的时候每个数据都有key和label,但是我们添加v-model的时候仅仅只需要key值的内容,属性名都不需要
<el-transfer
v-model="selectJurisdiction"
:data="AllJurisdiction"
:titles="['可添加权限','已添加权限']"
/>
ClickAddJurisdiction(item) {
this.dialogAddJurisdiction = true
const id = item.id
const token = this.UserToken
const initAllJurisdiction = []
const initSelectJurisdiction = []
this.http.get('token/permission/findByPage', {token}).then(res => {
res.data.data.map(item => {
initAllJurisdiction.push({
key: item.id,
label: item.name
})
})
this.AllJurisdiction = JSON.parse(JSON.stringify(initAllJurisdiction));
})
this.http.get('token/role/findById', {id, token}).then(res => {
res.data.permissionList.map(item => {
initSelectJurisdiction.push(item.id)
})
this.selectJurisdiction = initSelectJurisdiction
})
}