vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)
效果图：
直接上代码：
// An highlighted block<template><el-dialog:visible="true"title="业务分组"style="font-size: 18px"width="900px":close-on-click-modal="false"@close="dialogYwfzShowsBtn"><div><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-row :gutter="24"><el-col :xl="12" :lg="8" :md="12"><el-form-item label="分组名称" label-width="80px" prop="groupName"><el-input v-model="form.groupName"></el-input></el-form-item></el-col></el-row></el-form><div class="level"><!-- 左边框框 --><div class="transferbox"><div class="topbox"><span>未选择通道</span></div><div class="level searchbox"><el-inputv-model="filter"placeholder="请输入内容"style="width: 300px"/><el-buttontype="primary"style="margin: 0 0 0 20px"@click="searchClick">搜索</el-button></div><div class="contont"><el-tree:data="orgData":load="getOrgs":props="defaultProps":expand-on-click-node="false":highlight-current="true"show-checkboxnode-key="id"ref="tree"lazy@check-change="handleCheckChange"v-show="showTree"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{node.label }}</span></span></el-tree><el-checkbox:indeterminate="isIndeterminate"v-model="checkAll"@change="handleCheckAllChange"v-if="showCheck">全选</el-checkbox><div style="margin: 15px 0"></div><el-checkbox-groupv-model="checkedCities"@change="handleCheckedCitiesChange"><el-checkboxv-for="(item, index) in list":label="item.id":key="index">{{item.channelName }}</el-checkbox></el-checkbox-group></div></div><!-- 中间按钮 --><div class="vertical center3 centrebtn"><el-buttontype="primary"icon="el-icon-caret-right"@click="singleSel()"/><el-buttontype="primary"style="margin: 20px 0 0 0"icon="el-icon-caret-left"@click="mutiSel()"/></div><!-- 右边框框 --><div class="transferbox"><div class="topbox"><span>已选择通道</span></div><div style="padding: 10px" class="contont"><el-checkbox:indeterminate="isIndeterminateThen"v-model="checkAllThen"@change="handleCheckAllChangeThen">全选</el-checkbox><div style="margin: 15px 0"></div><el-checkbox-groupv-model="checkedCitiesThen"@change="handleCheckedCitiesChangeThen"><el-checkboxv-for="(item, index) in selectedData":label="item.id":key="index">{{item.channelName }}</el-checkbox></el-checkbox-group></div></div></div></div><div class="dialog-footer"><el-button class="g-background00BCD4" @click="dialogYwfzShowsBtn">返 回</el-button><el-button class="g-background00BCD4" type="primary" @click="onClickSave">保存</el-button></div></el-dialog></template><script>import _ from "underscore";import $ from "jquery";const defaultListQuery = {SkipCount: 0,MaxResultCount: 20,};export default {name: "PerformTaskDetailDialog",props: {visible: Boolean,id: String,},data() {return {defaultProps: {children: "children",label: "name",isLeaf: (data, node) => {return !data.hasChildren;},},checkAllThen: false,checkedCitiesThen: [],isIndeterminateThen: true,checkAllDeatilListThen: [],checkAll: false,checkedCities: [],isIndeterminate: true,checkAllDeatilList: [],parentId: null,listLoading: false,list: [],listQuery: Object.assign({}, defaultListQuery),filter: "",orgData: [],checkedArr: [],showCheck: false,showTree: true,selectedData: [],checkedIDArray: [],form: {groupName: "",},//form校验rules: {groupName: [{required: true,message: "请输入分组名称",trigger: "blur",},],},};},computed: {},watch: {},created() {},mounted: function () {},methods: {/* 组织树数据获取*/getOrgs(node, resolve) {const params = {};if (typeof node !== "object") {if (node) {params["filter"] = node;}} else if (node.level !== 0) {this.parentId = node.data.id;}setTimeout(() => {//接口请求，根据实际开发设置this.$api.getUVxxxParentId(this.parentId).then((response) => {if (resolve) {resolve(response);} else {Data = response;}});}, 100);},/* checkbox列表数据获取 */getList() {this.listLoading = true;this.list = [];this.listQuery.filter = this.filter;this.$api.querxxxannels(this.listQuery).then((response) => {this.list = [...response.items];this.listLoading = false;}).catch(() => {this.listLoading = false;});},searchClick() {//如果input输入框有值就显示if (this.filter != "") {this.showCheck = true;this.showTree = false;this.getList();} else {this.showCheck = false;this.showTree = true;// this.getOrgs();}},//树变化事件handleCheckChange() {//获取树选中的所以数据let res = this.$refs.tree.getCheckedNodes();//获取树选中的idthis.checkedIDArray = this.$refs.tree.getCheckedKeys();var nodes = _.filter(res, function (item) {return !item.hasChildren;});this.checkedArr = [];nodes.forEach((item) => {item.channelName = item.name;this.checkedArr.push(item);});},//关闭弹框dialogYwfzShowsBtn() {this.$emit("onclose");},// 左移singleSel() {let self = this;let queryAreaIdsList = [];if (self.showCheck == true) {//判断如果checkbox列表就移动checkbox选中的数据if (this.checkAllDeatilList.length == 0) {this.$message({message: "请选择通道！",type: "warning",});return;}this.selectedData = [...this.selectedData, ...this.checkAllDeatilList];} else if (self.showTree == true) {//判断如果el-tree就移动el-tree选中的数据if (this.checkedIDArray.length == 0) {this.$message({message: "请选择通道！",type: "warning",});return;}let params = {areaIds: this.checkedIDArray,};//这是我的项目需求，多调用了一次接口，如果是从树直接获取数据，可以忽略接口请求this.$api.getxxxByOrgIds(params).then((response) => {queryAreaIdsList = response;self.selectedData = [...queryAreaIdsList, ...this.checkedArr];self.selectedData = self.fn2(self.selectedData);});}//self.selectedData = [...this.checkedArr];//self.selectedData = self.fn2(self.selectedData);this.selectedData = self.fn2(self.selectedData);},//数组去重fn2(arr) {const res = new Map();return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, arr.id));},// 右移mutiSel() {//删除选中的for (let i = 0; i < this.selectedData.length; i++) {for (let j = 0; j < this.checkedCitiesThen.length; j++) {if (this.selectedData[i].id == this.checkedCitiesThen[j]) {this.selectedData.splice(i, 1);}}}this.isIndeterminateThen = true;this.checkedCitiesThen = [];},//左边未选中handleCheckAllChange(val) {let checkAll = [];if (val) {for (let i = 0; i < this.list.length; i++) {checkAll.push(this.list[i].id);}}this.checkAllDeatilList = val ? this.list : [];this.checkedCities = val ? checkAll : [];this.isIndeterminate = false;},//左边未选中handleCheckedCitiesChange(value) {this.checkAllDeatilList = [];let checkedCount = value.length;this.checkedCities = value;this.checkAll = checkedCount === this.list.length;this.isIndeterminate =checkedCount > 0 && checkedCount < this.list.length;//将获取的checkbox的值放到一个数组里for (let i = 0; i < this.list.length; i++) {for (let j = 0; j < this.checkedCities.length; j++) {if (this.list[i].id == this.checkedCities[j]) {this.checkAllDeatilList.push(this.list[i]);}}}},//右边已选中通道handleCheckAllChangeThen(val) {let checkAll = [];if (val) {for (let i = 0; i < this.selectedData.length; i++) {checkAll.push(this.selectedData[i].id);}}this.checkedCitiesThen = val ? checkAll : [];this.isIndeterminateThen = false;},//右边已选中通道handleCheckedCitiesChangeThen(value) {this.checkAllDeatilListThen = [];let checkedCount = value.length;this.checkAllThen = checkedCount === this.selectedData.length;this.isIndeterminateThen =checkedCount > 0 && checkedCount < this.selectedData.length;},onClickSave() {this.$refs.form.validate((valid) => {if (valid) {if (this.selectedData.length == 0) {this.$message({message: "通道不能为空！",type: "warning",});return;}let channelObjIds = [];this.selectedData.forEach((item, index) => {channelObjIds.push(item.objId);});let params = {groupName: this.form.groupName,channelObjIds: channelObjIds,};//保存接口，根据实际开发需要定义this.$api.createxxxGroup(params).then((response) => {if (response.success) {this.$message({message: "业务分组保存成功。",type: "success",});this.$emit("onclose", true);} else {this.$message({message: response.info,type: "warning",});this.$emit("onclose", false);}});}});},},};</script><style lang="scss" scoped>::v-deep .el-dialog {margin-top: 4vh !important;}::v-deep .el-dialog__body {padding: 20px;}.detail-row {margin-bottom: 25px;.detail {border-left: solid #ccc 1px;::v-deep .el-form-item {margin: 0;background: #f7f7f7;label {padding: 5px 8px;border-top: solid #ccc 1px;}.el-form-item__content {padding-left: 8px;padding-top: 5px;background: white;border-left: solid #ccc 1px;border-top: solid #ccc 1px;}}}.detail.row-end ::v-deep .el-form-item__content {border-right: solid #ccc 1px;}.detail.row-bottom {border-bottom: solid #ccc 1px;}}.dialog-footer {padding-top: 20px;text-align: right;border-top: solid #eee 1px;}///@at-root///.transferbox {height: 600px;width: 45%; //右边盒子的宽占比border: 1px solid#ebedf2;.topbox {border-bottom: 1px solid #ebedf2;padding: 10px 10px;color: #575962;font-size: 16px;font-weight: 550;}.searchbox {margin: 10px;}}.centrebtn {width: 80px;height: 600px;margin: 0 10px 0 10px;color: #ffff;}/* 水平居中 */.center1 {display: flex;justify-content: center;}/* 垂直水平居中 */.center3 {display: flex;align-items: center;justify-content: center;}/* 水平布局 */.level {display: flex;flex-direction: row;}// 垂直布局.vertical {display: flex;flex-direction: column;}.contont {padding: 10px;}::v-deep .contont .el-checkbox {display: block;}</style>
这是弹框页面，可以当做组件调用，也可以根据实际开发需求自定义自己的页面。只要树的数据和checkbox的数据自己定义好，就可以直接复用。
如果觉得《vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)》对你有帮助，请点赞、收藏，并留下你的观点哦！
