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

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

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

{
      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，时机是在打开编辑框的时候

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

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

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

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

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

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

 

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

{
        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
          }
        }
},

 

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