vue-vben-admin

vue-vben-admin copied to clipboard

字段transfer到右侧后，往往需要拖拽排序。

@gnyuan 给个代码示例，我尝试处理下

@gnyuan 给个代码示例，我尝试处理下

老师您好啊，这是draggable的示例，体验上挺好的。 这是关键源码，如果能修改到APITransfer组件里那就太好了。右侧栏确实总需要排序。

<template>
<Card title="13 拖拽">
      <div class="flex flex-row">
        <div class="col-4">
          <h3>第一列拖拽</h3>

          <draggable :list="list" class="hover:cursor-move border-1" group="a" item-key="name">
            <template #item="{ element }">
              <div class="border-2">{{ element.name }}</div>
            </template>

            <template #footer>
              <a-button color="primary" @click="add">Add</a-button>
              <a-button color="warning" @click="replace">Replace</a-button>
            </template>
          </draggable>
        </div>

        <div class="col-4">
          <h3>第二列拖拽</h3>

          <draggable :list="list2" class="hover:cursor-move border-1" group="a" item-key="name">
            <template #item="{ element }">
              <div class="border-2">{{ element.name }}</div>
            </template>

            <template #header>
              <a-button color="primary" @click="add2">Add</a-button>
              <a-button color="warning" @click="replace2">Replace</a-button>
            </template>
          </draggable>
        </div>
      </div>
    </Card>
</template>
<script setup lang="ts">
  import draggable from 'vuedraggable';

  let id = 1;
  const list = ref([
    { name: 'John 1', id: 0 },
    { name: 'Joao 2', id: 1 },
    { name: 'Jean 3', id: 2 },
  ]);
  const list2 = ref([
    { name: 'Jonny 4', id: 3 },
    { name: 'Guisepe 5', id: 4 },
  ]);
  const add = () => {
    list.value.push({ name: 'Juan ' + id, id: id++ });
  };
  const replace = () => {
    list.value = [{ name: 'Edgard', id: id++ }];
  };
  const add2 = () => {
    list2.value.push({ name: 'Juan ' + id, id: id++ });
  };
  const replace2 = () => {
    list2.value = [{ name: 'Edgard', id: id++ }];
  };
</script>

@gnyuan 给个代码示例，我尝试处理下

@gnyuan 这个应该是antd组件Transfer的能力，antd组件Transfer目前是支持排序的，不过是选的时候按想要的顺序选就好了，自身可以控制选中的显示顺序的。如果顺序不对，删掉了重新按照想要的顺序选就好了。

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days