<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-checkbo
el-tree实现穿梭框功能
于 2022-12-23 15:03:47 首次发布
本文介绍如何利用Vue.js和El-Tree组件来实现穿梭框功能,通过结合JavaScript实现数据双向绑定和操作,达到在两个树形结构间便捷地转移节点的效果。
摘要由CSDN通过智能技术生成