el-transfer穿梭框,右侧数据回显

        这是饿了么的组件穿梭框

        data() {
            return {
                loading: false,
                inputForm: {
                    id: '',
                    gridName: '',
                    gridId: '',
                    projectName: '',
                    projectId: '',
                    type: ''
                },
                data: [],
                value: []
            }

        },

         data中的数据格式

        右侧数据回显前提是左侧的数据中包含了右侧的数据,这么说有点绕看代码

        data中是所有的数据, value是右侧的数据,写了两个方法findAllProjectData是获取除去右侧的数据,findAllGridProject是获取右侧的数据,最后在获取value的方法中,将value的数据拼接给data,这样data就获取了所有数据,最重要的地方:el-transfer会自动将数据去重,不用担心左侧栏出现右侧的数据,最最重要的地方:value给赋值的时候只给id就可以

findAllProjectData() {
                this.get('${ctx}/basicinfo/gridProject/findAllProject?regionId=&type=' + this.inputForm.type).then((res) => {
                    if (res.data) {
                        this.data = res.data
                        this.findAllGridProject()
                    }
                })
            },

findAllGridProject() {
                this.value=[]
                this.get('${ctx}/basicinfo/gridProject/findAllGridProject?gridId=' + this.inputForm.gridId + '&type=' + this.inputForm.type).then((res) => {
                    if (res.data) {
                        res.data.forEach(item => {
                            this.$set(this.value, this.value.length, item.projectId)
                            this.$set(this.data, this.data.length, item)
                        })
                    }
                })
            },

你可能感兴趣的:(javascript,前端,vue.js)