基于element-ui的穿梭框（el-transfer）实现点击上下移动

你的骑士M

已于 2022-09-06 10:42:07 修改

阅读量1k

点赞数 4

文章标签： css 前端 scss elementui typescript

于 2022-09-05 15:44:29 首次发布

本文链接：https://blog.csdn.net/qq_42360279/article/details/126706694

版权

实现效果

transfor

<!-- 字段筛选组件 -->
<template>
  <div class="k-field-filter" style="z-index: 99;">
    <div class="field-filter">
      <header>
        <span class="text">设置列表显示字段</span>
        <span class="el-icon-close" @click="closeWindow"></span>
      </header>
      <main class="transfer">
        <el-transfer
                filterable
                filter-placeholder="请输入关键词搜索"
                v-model="value"
                target-order="unshift"
                :titles="['选项合集','已选项合集']"
                :data="data"
                v-loading="loading"
                @right-check-change="choose">
          <el-button
                  class="transer-top ml10"
                  slot="right-footer"
                  size="text"
                  @click="publicMobileMethod('handleUp')"
          ><em class="el-icon-top"></em>
          </el-button>
          <el-button
                  class="transer-top ml10"
                  slot="right-footer"
                  size="text"
                  @click="publicMobileMethod('handleDown')"
          ><em class="el-icon-bottom"></em>
          </el-button>
          <el-button
                  clas