vue3+Element Plus实现自定义穿梭框的详细代码
更新时间：2024年01月30日 09:26:11 作者：左小白
找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件,本文给大家分享vue3+Element Plus实现自定义穿梭框的示例代码,感兴趣的朋友一起看看吧
先上效果图：具体细节可以自己调整这里主要说明 派单，取消这两个按钮的实现
DOM部分代码：
<el-row style="min-height: 7.5rem">
<el-col :span="10" style="border: 1px solid #E1E1E1;border-radius: 5px">
<div>
<div style="border-radius: 5px 5px 0px 0px;
border-bottom: 1px solid #42A4ED;display: flex;
justify-content: space-around;background: #42A4ED">
<div id="rec" style="
font-weight: bolder;
cursor: pointer;/*鼠标变成手指样式*/
transition: all 0.3s;
color: #fff;">
<p style="padding: 10px 10px;height: 40px;"></p>
</div>
</div>
<div style="padding-bottom: 20px;margin: auto;
min-height: 15%;width:80%;font-size: .2rem;
color:#0c1a24;background-color: #fff;">
<el-row>
<el-col :span="20" style="margin-left: 40px; margin-top: 10px;">
<el-input :style="{ margin: 'auto', height: '30px'}" v-model.trim="formData.orgName"
v-show="flag == 'REC'" placeholder="请输入组织名称">
<template #append>
<img @click="getUserData()" src="@/assets/images/icon/search.png"
style="position:relative;top:0px;right: 0px;cursor: pointer">
</template>
</el-input>
</el-col>
</el-row>
</div>
<el-table v-loading="flagTbale" ref="selectedLeft" align='center' :row-style="{ height: '30px', padding: '0 0' }"
highlight-current-row :data="tableData" @selection-change="handleLeftSelectionChange"
:cell-style="{ padding: '3px', background: '#fff', paddingLeft: '0', color: '#666' }"
:header-cell-style="{ background: '#42A4ED', color: '#FFFFFF', height: '20px', fontSize: '0.2rem', fontWeight: 'bold' }"
:header-row-style="{ padding: '10px' }">
<el-table-column type="selection" width="50" prop="select"></el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" v-for="col in cols" :key="col.id"
:label="col.label" :prop="col.prop" :width="col.width">
</el-table-column>
</el-table>
<div style="height: 1rem;margin-bottom:0.2rem;display: flex; justify-content: center;">
<el-pagination class="pagination" small layout="prev, pager, next" @size-change="handleSizeChange"
:pager-count="3" @current-change="handleCurrentChange" v-model:current-page="pageNum"
v-model:page-size="pageSize" :total="total" />
</div>
</div>
</el-col>
<!-- 中间按钮 -->
<!--中间按钮开始-->
<el-col :span="2" class="layui-transfer-active" style="margin: 230px 3% 0 5%;">
<div>
<el-button class="setting-btn" style="width: 70%;" @click="buttonRight" type="primary"
:disabled="fxDisabled">
派单
</el-button>
</div>
<div>
<el-button class="setting-btn mt20" style="width: 70%;" @click="buttonLeft" type="primary"
:disabled="qxfxDisabled">取消
</el-button>
</div>
</el-col>
<el-col :span="10" style="border: 1px solid #E1E1E1;border-radius: 5px">
<div>
<div style="border-radius: 5px 5px 0px 0px;
border-bottom: 0px solid #42A4ED;display: flex;
justify-content: space-around;background: #42A4ED">
<div id="reced" style="font-family: SourceHanSansCN-Medium;
font-weight: bolder;
cursor: pointer;/*鼠标变成手指样式*/
transition: all 0.3s;
color: #fff;">
<p style="padding: 1px 0px;height: 4px;"></p>
</div>
</div>
<el-table ref="selectedRight" align='center' max-height="470px" :row-style="{ height: '30px', padding: '0 0' }"
highlight-current-row :data="sharedData" @selection-change="handleRightSelectionChange"
:cell-style="{ padding: '3px', background: '#fff', paddingLeft: '0', color: '#666' }"
:header-cell-style="{ background: '#42A4ED', color: '#FFFFFF', height: '20px', fontSize: '0.2rem', fontWeight: 'bold' }"
:header-row-style="{ padding: '10px' }"
>
<el-table-column type="selection" width="55" prop="select"></el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" v-for="col in cols" :key="col.id"
:label="col.label" :prop="col.prop" :width="col.width">
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>穿梭框的table表头是动态的html中无需修改，使用这个组件首先需要在scripe中创建如下变量
const tableData = ref([]) //左侧数据
const selectedLeft = ref([])// 左侧选中数据
const sharedData = ref([])//右侧数据
const selectedRight = ref([])// 右侧选中数据
//表格loading
const flagTbale = ref(false) //可以去除所有的flagTbale 变量即可去除loading功能
//两个table表头
const cols = ref([
{ id: 1, prop: 'latnName', label: '本地网' },
{ id: 2, prop: 'orgId', label: '组织编码' },
{ id: 3, prop: 'orgName', label: '组织' },
])然后就是最重要的按钮功能
// 取消按钮
const buttonLeft = async () => {
if (!selectedRight.value || !Array.isArray(selectedRight.value)) {
selectedRight.value = [];
}
// 将右侧选中的数据移动到左侧
tableData.value = tableData.value.concat(selectedRight.value);
// 从右侧数据中移除已经移动的数据
sharedData.value = sharedData.value.filter(item => !selectedRight.value.includes(item));
// 清空右侧选中的数据
selectedRight.value = [];
}
// 分享按钮
const buttonRight = async () => {
if (!selectedLeft.value || !Array.isArray(selectedLeft.value)) {
selectedLeft.value = [];
}
// 将左侧选中的数据移动到右侧
sharedData.value = sharedData.value.concat(selectedLeft.value);
// 从左侧数据中移除已经移动的数据
tableData.value = tableData.value.filter(item => !selectedLeft.value.includes(item));
// 清空左侧选中的数据
selectedLeft.value = [];
}按钮禁用逻辑实现
// 按钮是否禁用
const qxfxDisabled = ref(true)
const fxDisabled = ref(true)
// 左侧表格选中事件
const handleLeftSelectionChange = (selection) => {
if (selection.length !== 0) {
fxDisabled.value = false
}
if (selection.length === 0) {
fxDisabled.value = true
}
};
// 右侧表格选中事件
const handleRightSelectionChange = (selection) => {
selectedRight.value = selection;
if (selection.length !== 0) {
qxfxDisabled.value = false
}
if (selection.length === 0) {
qxfxDisabled.value = true
}
};到这里你就可以使用在这个组件了。这是经过插分的代码原本还拥有表头切换的逻辑如有需要可留言.我后续可以在做整理
到此这篇关于vue3+Element Plus实现自定义穿梭框的文章就介绍到这了,更多相关vue3 Element Plus穿梭框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue+Webpack完美整合富文本编辑器TinyMce的方法
这篇文章主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了在项目vue中使用echarts的操作步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue监听dom大小改变案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章给大家介绍了vue实现表格动态嵌入折线图的绘制方法,文中有详细完整的代码示例攻大家参考,对大家的学习或工作有一定的参考价值,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了利用Vue-cli搭建Vue项目框架的相关资料，对大家深入了解Vue有一定的帮助，感兴趣的小伙伴可以了解一下2023-02-02
本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式，本文将详细介绍在Vue应用程序中实现AJAX的四个方法，有兴趣的可以了解一下2017-08-08
vxe-table是一个全功能的Vue表格,满足绝大部分对Table的一切需求,与任意组件库完美兼容,下面这篇文章主要给大家介绍了关于Vxe-Table开发中各种坑以及避坑的相关资料,需要的朋友可以参考下2022-09-09
vue3+element-plus Dialog对话框的使用与setup 写法的用法
这篇文章主要介绍了vue3+element-plus Dialog对话框的使用 与 setup 写法的使用,本文通过两种方式结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue实现PopupWindow组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要介绍了浅谈一下Vue技术栈之生命周期,每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,这些过程中会伴随着一些函数的自调用,需要的朋友可以参考下2023-05-05
最新评论