在d2-crud-plus使用穿梭框遇到的问题总结

做后台开发的时候，所使用的前端框架一直是d2admin，其中重要的是使用了d2-crud-plus。

本周在使用其中的穿梭框(transfer)组件的时候，大费周章，官方给的示例实在太简单了(其实也怪自己学艺不精)。。。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{       title: '穿梭框',       key: 'transfer',       type: 'transfer',       form: {         component: { span: 24 }       },       valueBuilder (row, col) {         if (row[col.key] === '') {           row[col.key] = null         }         // console.log('tranfer:', row, row[col.key], col.key)       }       },

 

在这个示例中，没看到如何传输数据，于是开始了漫长的折腾过程。。。

1、开始以为可以走dict来获取数据，折腾来折腾去，发现根本不响应，遂放弃。

2、然后根据transfer组件内部使用的是el-transfer，看到了对应的数据属性是data。通过在from:component中直接添加data数组，果然生效了。

3、但我的目的是动态获取数据，不能用固定不变的data数组，然后就各种查资料怎么传递数据到from中。

4、查了半天无果。。。

5、机智如我，想到了通过qq搜索，果然找到了一个d2-crud-plus的群：871382478，群主是个好人，我问的问题都给详细回复了。

1）首先群主告诉我可以通过暴露的接口传递数据给form，时机是在打开编辑框的时候

?

1 2 3 4 5

doDialogOpened (context) {       api.GetAgents().then(res => {         this.$set(this.getEditFormTemplate('agents').component.props, 'data', res)       }) }

 通过这种方式，终于能成功的动态获取数据，并且传递到form中了！！伟大的第一步！

2）但随之更为头疼的问题来了，当在穿梭框中第一次数据被选到右侧的时候，全部数据都消失不见了。后来发现只要最大化一次页面，数据又恢复了。。

同时诡异的是，如果data数组是预置好的，则不会有这个问题。

我首先怀疑的是页面刷新问题，分析change事件里的元素，然后尝试各种刷新方式。获取到数据时刷新，change事件时刷新，但均不生效。

这一步搞的我快怀疑人生了。。。

 

又是伟大的群主拯救了我，他告诉我component的属性要写在props内！！奇怪，我之前直接写在component下的属性也是生效的。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

{         title: '选择代理商',         key: 'agents',         type: 'transfer',         show: false,         form: {           title: '选择代理',           component: {             name: 'el-transfer',             props: {               filterable: true,               titles: ['全部代理商', '已选择代理商']             },             on: {               change (value) {                 // console.log('change: ', value)               }             },             span: 24           }         } },

 

终于成功了！！这里整理下，希望对其他人有所帮助，也感谢下群主！