vue省市穿梭框

506 阅读1分钟

1.jpg

演示地址 transfer111.netlify.app/

git代码地址 github.com/RenYC/trans…

本项目使用 ant-design-vue 项目中的例子,由于在使用过程中出现了问题, 已选中的属性右边不显示。在此做一个记录


下面是官方例子外添加的代码

<div v-if="direction === 'right'">
  <div
    v-for="(item) in filteredItems"
    :key="item.key"
  >
    <a-checkbox
      @change="rightChange(item.key)"
    >
      {{ item.title }}
    </a-checkbox>
  </div>
</div>
rightChange(val) {
  if (!this.$refs.transfer.targetSelectedKeys.includes(val)) {
    this.$refs.transfer.targetSelectedKeys.push(val)
  } else {
    const index = this.$refs.transfer.targetSelectedKeys.findIndex(item => {
      return item === val
    })
    this.$refs.transfer.targetSelectedKeys.splice(index, 1)
  }
}