实现一个左右二级穿梭框

努力站桩的奶酪呦

已于 2023-05-12 15:28:05 修改

阅读量276

点赞数

文章标签： vue.js javascript elementui

于 2023-04-20 18:03:00 首次发布

本文链接：https://blog.csdn.net/liuli0927/article/details/130272545

版权

本文详细介绍了如何在Vue.js项目中结合ElementUI库，成功创建一个功能完善的左右二级穿梭框组件，解决了一个长期困扰作者的问题。

摘要由CSDN通过智能技术生成

这个问题困扰了好久，终于把它搞出来了

1.新建一个组件

//TreeTransfer.vue
<template lang="html">
  <div class="tree-transfer">
    <div class="transfer-panel unselect">
     <!-- <div class="transfer-panel__header">
        <el-checkbox v-model="leftCheckAll" @change="clickLeftCheckAll">待选</el-checkbox>
     </div> -->
     <div class="transfer-panel__content">
       <!-- <el-input
        size="mini"
        placeholder="输入关键字进行过滤"
        v-model="leftFilterText">
       </el-input> -->
       <!-- <el-row :gutter="15" style="margin: 10px 1px;">
        <el-col :lg="12" :md="15">
          <el-select v-model="query" placeholder="请选择控制区域" clearable @change="changeArea"
          :popper-append-to-body="false">
            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :lg="12" :md="15">
           筛选回路类型 -->
          <!-- <el-select v-model="queryType" placeholder="请选择控制类型"  clearable @change="changeType"
          :popper-append-to-body="false">
            <el-option v-for="item in typeData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row> -->
       <el-tree
        filter
        ref= "tree"
        :data="leftNodeData"
        show-checkbox
        node-key="id"
        :default-expand-all="false"
        :filter-node-method="filterNode"
        @check = "nodeClick"
        :props="defaultProps">
      </el-tree>
     </div>
    </div>
    <div class="button">
      <div :class="[ 'btn', {'disabled': !toLeft} ]" @click = "removeToLeft">
        向左
      </div>
      <div :class="[ 'btn', {'disabled': !toRight} ]" @click = "removeToRight">
        向右
      </div>
    </div>
    <div class="transfer-panel selected">
      <!-- <div class="transfer-panel__header">
        <el-checkbox v-model="rightCheckAll" @change="clickRightCheckAll">已选</el-checkbox>
      </div> -->
      <div class="transfer-panel__content">
        <!-- <el-input
         size="mini"
         placeholder="输入关键字进行过滤"
         v-model="rightFilterText">
         </el-input> -->
        <el-tree
         ref= "selectedTree"
         :data="rightNodeData"
         show-checkbox
         :default-expand-all="false"
         node-key="id"
         :filter-node-method="filterNode"
         @check = "selectedClick"
         :props="defaultProps">
       </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'findList',
          label: 'name'
        }
      }
    },
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    },
    defaultKeys: {
      type: Array,
      default: () => {
        return []
      }
    },
    areaInfo:{
      type: Array,
      default: () => {
        return []
      }
    },
    typeInfo:{
      type: Array,