这里的v-model就是右侧数据回显的值,是个回显数据key的数组
:data 绑定的数据是全部的数据 也是一个数组,需要在函数data()中声明,而且右侧框中的数据必须是在左侧数据中,否则不会显示(左侧的数据是全部数据,elementUi内部对左侧已经进行去重了)
Html代码
<el-button @click="editFieldBtn">点击变更<el-button/>
<el-dialog title="编辑" :visible.sync="changeDialogTableVisible" width="45%">
<span slot="footer" class="dialog-footer">
<el-button @click="changeDialogTableVisible = false">取り消し</el-button>
<el-button type="primary" @click="editField()">確 定</el-button>
</span>
<el-transfer
v-model="rightValue"
:data="this.leftValue"
@change="getObject"
:titles="['正在使用', '已删除历史']"
>
<span slot-scope="{option}">
{{ option.label }}
</span>
</el-transfer>
</el-dialog>
定义数据部分
changeDialogTableVisible = false // 控制遮罩层显示
leftValue:any[] = [] // 左边数据需要把全部数据全部显示上
rightValue:number[] = [] // 穿梭框绑定的数据,选定到右侧框中的数据项的value组成的数组,通过key值绑定
editLayoutData:any[] = [] // 数据源array[{ key, label, disabled }]
indexOne = 0;
逻辑
// 打开遮罩层时,将左右数据显示,并且能点击,来回跳转
// 根据数据表名,从后台获取各个表的所有字段的相关信息
editFieldBtn() {
this.changeDialogTableVisible = true
const allData = this.editLayoutData
const data = []
for (let i = 0; i < allData.length; i++) {
data.push({
key: allData[i].id,
label: allData[i].fieldName,
id: allData[i].id,
isUsed: allData[i].isUsed
})
}
data.map(item => {
if (item.isUsed === 0) {
this.rightValue.push(item.key)
}
});
(this.leftValue as any) = data
}
// 右侧列表元素变化时触发
// value右边框里面所有的key值 direction是方向(left和right),movedKeys是移动的key值
getObject(value: any, direction: any, movedKeys: any) {
// 判断移动方向
if (direction === 'right') {
// 找出key值,然后根据key值找到下标,进行对控制删除显示的键进行修改状态
movedKeys.map((item: number, index:number) => {
this.editLayoutData.filter((i, k:number) => {
if (i.id === item) {
this.indexOne = k
}
})
// isUsed是删除,未删除的状态
this.editLayoutData[this.indexOne].isUsed = 0
})
} else {
movedKeys.map((item: any) => {
this.editLayoutData.filter((i, k:number) => {
if (i.id === item) {
this.indexOne = k
}
})
this.editLayoutData[this.indexOne].isUsed = 1
})
}
}
调用接口修改就行了,由于使用的是vue-grid-layout插件显示的时候过滤一下显示就行了
写后台项目遇到的坑,如有错误,请多多指教