vue+arco design中封装一个支持单个多个上下换序需求的穿梭框

最新推荐文章于 2024-12-26 15:20:00 发布

原创

最新推荐文章于 2024-12-26 15:20:00 发布 · 487 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#arco design

需求描述

在vue+arco的项目中做一个导出按钮前置弹窗，弹窗内含一个穿梭框，并且支持穿梭框内有默认选中字段并且可以自己调整字段左右及上下位置以便导出表格内字段位置显示

实现过程

因现在大部分ui库都有穿梭框所以选择直接进行封装为了方便我把弹窗组件所有代码全部放入按需取用

<template>
  <a-modal
    v-model:visible="exportVisible.visible"
    title-align="start"
    width="720px"
    title="导出"
  >
    <template #footer>
      <div style="text-align: center">
        <a-space :size="18">
          <a-button
            type="primary"
            :disabled="!exportVisible.expertId.length"
            @click="derive(1)"
          >
            导出当前列表
          </a-button>
          <a-button type="primary" @click="derive(2)">导出全部</a-button>
          <a-button type="outline" @click="derive(3)">取消</a-button>
        </a-space>
      </div>
    </template>
    <a-space fill :size="20">
      <a-transfer
        v-if="exportVisible.visible"
        v-model="exportVisible.expertId"
        v-model:selected="exportVisible.selectId"
        show-search
        :data="data"
        :source-input-search-props="{ placeholder: '请输入可选字段' }"
        :target-input-search-props="{ placeholder: '请输入已选导出字段' }"
      >
        <template #source-title> 可选字段 </template>
        <template #target-title> 已选导出字段 </template>
      </a-transfer>
      <a-space direction="vertical">
        <a-button
          :disabled="!targetSelect"
          shape="round"