vue3 + element-plus 自定义树形穿梭框

最新推荐文章于 2024-06-11 08:31:16 发布

[]|

最新推荐文章于 2024-06-11 08:31:16 发布

阅读量1.3k

点赞数 10

本文链接：https://blog.csdn.net/qq_44847554/article/details/135359042

版权

本文介绍了如何在Vue3项目中利用Element-Plus组件库自定义一个功能丰富的树形穿梭框，包括组件的HTML结构、脚本编写以及在父组件中的使用方法，展示了前端开发中的组件化实现。

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

效果图：

子组件：

HTML


<template>
    <div class="treeTransfer">
        <!-- 左边 -->
        <div class="leftTree">
            <div class="list">
                <div class="left_lowline">
                    <el-checkbox v-model="checkedLeft" :disabled="leftTreeData.length < 1" label="" size="large"
                        style="margin-right: 12px" @change="leftAllCheck" />
                    <p class="left_title">{
  { props.title[0] }}</p>
                </div>
                <!-- 搜索 -->
                <div class="left_input">
                    <el-input v-model.trem="leftSearchText" class="w-50 m-2" placeholder="请输入部门人员名称" clearable
                        prefix-icon="el-icon-search" @clear="onSearchLeft" @keyup.enter="onSearchLeft"
                        @change="onSearchLeft" />
                </div>
                <el-tree ref="leftTreeRef" :filter-node-method="filterNode" :data="leftTreeData" show-checkbox
                    :node-key="props.nodeKey" :props="props.defaultProps" v-slot="{ node, data }" accordion
                    @check="onCheckLeft" default-expand-all>
                    <div>
                        {
  { data.corgName }}
                    </div>
                    <div>
                        {
  { data.label }}
                    </div>
                </el-tree>
            </div>
        </div>
        <!-- 中间按钮 -->
        <div class="btnDiv">
            <div class="mg10">
                <el-button @click="toRight()" size="small" icon="el-icon-right" circle :disabled="leftOperation.length < 1"/>
            </div>
            <div class="mg10">
                <el-button @click="toLeft()" size="small" icon="el-icon-back" circle :disabled="rightOperation.length < 1"/>
            </div>
        </div>
        <!-- 右边 -->
        <div class="rightTree">
            <div class="list">
                <div class="left_lowline">
                    <el-checkbox v-model="checkedRight" :disabled="rightTreeData.length < 1" label="" size="large"
                        style="margin-right: 12px" @change=&#