前端穿梭框封装

那就再敲一下代码

已于 2023-06-09 11:29:37 修改

阅读量277

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-06-09 11:15:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41225297/article/details/131123677

版权

<!-- 新版穿梭框组件自定义封装 2023-05-25  支持左右穿梭 -->
<template>
  <div class="onlineTransfer">
    <el-row>
      <el-col
        :span="7"
        class="codeSetList"
      >
        <div class="codeSearchTit">
          <i>项目列表</i>
          <span>共{
  { seacrchCodeLength }}条</span>
        </div>
        <div class="codeSearchList">
          <el-select
            v-model="seacrchFication"
            size="small"
            class="searchSelect"
            filterable
            @change="changeFication"
          >
            <el-option
              v-for="item in seacrchFicationList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-input
            placeholder="请输入项目名称"
            v-model="codeSearch"
            size="small"
            clearable
            class="searchInput"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchCode"
            ></el-button>
          </el-input>
        </div>
        <div class="projectBox">
          <ul class="codeTit">
            <li>项目分类</li>
            <li>项目名称</li>
          </ul>
          <el-checkbox-group
            v-model="codeCheck"
            class="codeCheck"
            @change="codeCheckLeftChange"
            :class="{ etlHeight: isEtl == true }"
            v-loading="loading"
          >
            <el-checkbox
              v-for="(item, index) in seacrchCodeList"
              :key="index"
              :label="item.fieldName"
            >
              <div>
                <span>{
  { item.businessScope }}</span>
                <span>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.fieldCaption"
                    placement="bottom"
                  >
                    <span>{
  { item.fieldCaption }}</span>
                  </el-tooltip>
                </span>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="codeButtonRight">
          <el-button
            type="primary"
            icon="el-icon-arrow-right"
            :disabled="codeRightDisable"
            @click="codeToRight"
          ></el-button>
        </div>
        <div class="codeButtonLeft">
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            :disabled="codeLeftDisable"
            @click="codeToLeft"
          ></el-button>
        </div>
      </el-col>
      <el-col
        :span="15"
        class="codeSetList"
      >
        <div class="codeSearchTit">
          <em>已选{
  { checkdCodeLength }}条</em>
          <div class="codeSearchDo">
            <span @click="deleteAll"><i class="el-icon-delete"></i>清空全部</span>
            <span
              @click="onlineSet"
              v-show="onlineSetShow == 1"
            ><i class="el-icon-setting"></i>自定义项目</span>
          </div>
        </div>
        <el-row>
          <el-col
            :span="6"
            class="checkedFiction"
            :class="{ etlFicationHeight: