最近项目中运动用到了transfer,而且还和tree一起运用,真的是头大,不过还好,最终还是解决了。

ant-design-vue文档里都有,我只粘贴部分代码--------

  <a-transfer
      class="tree-transfer"
      :data-source="dataSource"
      :target-keys="targetKeys"//重要的部分
      :render="item => item.title"
      :show-select-all="false"
      @change="onChange"
    >
 <template
        slot="children"
        slot-scope="{
          props: { direction, selectedKeys },
          on: { itemSelect },
        }"
      >
      //没有了checkStrictly,父级和子级就有关联了
        <a-tree
          v-if="direction === 'left'"
          blockNode
          checkable
          defaultExpandAll
          :replace-fields="replaceFields"//自定义设置字段
          :checkedKeys="[...selectedKeys, ...targetKeys]"
          :treeData="treeData"//树的数据
          @check="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys],itemSelect)}"
          @select="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys],itemSelect)}"
        />
      </template>

Transfer 中,dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识

对于后端返回的数据,没有key和title的数据,该怎么解决?

replaceFields这个属性去设置,你想要的字段。在data

 replaceFields: {
        key: "id",
        title: "label"
 },

而穿梭框dataSource的数据是来自transferDataSource,所以就可以

function flatten(list = []) {
  if (list) {
    list.forEach(item => {
      transferDataSource.push({
        key: item.id,
        title: item.label
      });
      flatten(item.children);
    });
  }
}

对于穿梭的问题

direction这个属性是起到了一定的作用了,穿梭是@change="onChange"这个事件完成的,因此要知道targetKeys,它的作用是啥?所以在这个函数里。

onChecked(_, e, checkedKeys, itemSelect){
   //_这个下划线,就是你勾的key值,全选时,它就是所有的key值,当然看你的需求
      this.totalChecked=_;//所以初始化一个状态赋值
      const { eventKey } = e.node
      itemSelect(eventKey, isChecked(this.totalChecked, eventKey));
  }
    //当然少不了direction
 onChange(targetKeys,direction) {
    this.targetKeys = targetKeys;//如果仅仅这样写是穿梭不到右边的,所以
  if(direction=='right'){
       this.targetKeys=this.totalChecked
       //如果你还要有其他需求,在里面可以再判断
     }
 // 但是,想要穿梭到左边来,得这样写
  if(direction=='left'){
       this.targetKeys=targetKeys
    }
  },

这个穿梭的功能就大概的实现了,里面的一些细节还要注意下…

Logo

前往低代码交流专区

更多推荐