el-tree实现穿梭框功能

VIP文章 web_Orisir

已于 2022-12-23 15:08:56 修改

阅读量388

点赞数

文章标签： vue.js 前端 javascript

于 2022-12-23 15:03:47 首次发布

本文链接：https://blog.csdn.net/weixin_46631365/article/details/128419826

版权

<template>
    <div class="transfer">
      <div class="transfer-left">
          <div>
              <el-checkbox v-model="leftCheckAll" @change="checkAll"></el-checkbox>
              <span>{
  { titles[0] }}</span>
          </div>
          <div class="reansfer-search">
            <el-input placeholder="搜索" class="cus-icon" v-model="filterLeftText" clearable suffix-icon="el-icon-search" />
          </div>
          <div class="scrolls">
              <el-tree 
                :data="data" 
                :props="treeProps" 
                show-checkbox
                ref="tree"
                @check="checkChange"
                :check-strictly="checkStrictly"
                :node-key="treeProps.value"
                :default-expand-all="defaultExpandAll"
                :filter-node-method="filterNode"
                v-loading="personLoading"
              >
              <span slot-scope="{ node }" class="custom-tree-node">
                    <span v-if="!filterLeftText">{
  { node.label }}</span>
                    <span v-if="filterLeftText" v-html="node.label.replace(new RegExp(filterLeftText,'g'),`<font style='color:red'>${filterLeftText}</font>`)" />
                </span>
            </el-tree>
          </div>
      </div>
      <div class="transfer-center">
          <el-button 
          :type="rightBtn?'primary':'info'" 
          :plain="!rightBtn" 
          :disabled="!rightBtn"
          @click="transRight"
          >加入右侧<i class="el-icon-arrow-right"></i></el-button>
          <el-button
          :type="leftBtn?'primary':'info'" 
          :plain="!leftBtn" 
          :disabled="!leftBtn"
          @click="transLeft"
          ><i class="el-icon-arrow-left"></i>加入左侧</el-button>
      </div>
      <div class="transfer-right">
          <div>
                <el-checkbox v-model="rightAll" @change="checkRightAll"></el-check