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 {this.orgData = 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)相关推荐

element筛选 ajax,vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
##vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询基于element Transfer 直接上代码 XXXXX 编辑XXX 编辑XXXX style=" ...
vue element Transfer 穿梭框自定义数
1.Transfer 穿梭框自定义数据时有两种方式: (1)使用"render-content 函数"方式 (2)使用" slot-scope="{ optio ...
vue+iview 自定义实现穿梭框
vue+iview 自定义实现穿梭框因业务需求iview穿梭框不满足业务需求自己写了个穿梭框.因本人是后端,请各位大佬看到了也可帮忙优化下.只实现了基本功能表格及模态框代码 <Modal v ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
ElementUI中Transfer穿梭框的使用、赋值取值进而实现新增和编辑功能
场景要实现的效果如下这里用到了ElemrntUI的Transfer穿梭框控件官方示例代码 <template><p style="text-align: center ...
Win10 + VSCode踩坑 + vue项目开发：设置vscode终端为管理员权限
win10系统如何设置vscode的终端为管理员权限? 一次一次的授权太麻烦! 这里直接更改授权为管理员运行即可. 操作与设置步骤: "桌面找到"VSCode"程序图标 ...
Vue项目中的自定义指令
Vue项目中的自定义指令使用场景:需要对DOM元素进行底层操作局部自定义指令当指令第一次被绑定到元素上的时候,会立即触发 bind() 1 定义与 data 同级在 directives 节 ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
Vue项目开发中优雅的切换服务端ip
Vue项目开发中优雅的切换服务端ip 在进行Vue开发的时候,需要配置项目对应服务端的ip地址,但如果需要在多个服务端间进行切换,通常的做法是:手动修改vue.config.js配置文件中的服务端ip ...

vue项目开发实现自定义Transfer穿梭框效果(结合el-tree)

vue项目开发实现自定义Transfer穿梭框效果(结合el-tree)

vue项目开发实现自定义Transfer穿梭框效果(结合el-tree)相关推荐

最新文章

热门文章

vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)

vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)

vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)相关推荐

最新文章

热门文章

vue项目开发实现自定义Transfer穿梭框效果(结合el-tree)

vue项目开发实现自定义Transfer穿梭框效果(结合el-tree)

vue项目开发实现自定义Transfer穿梭框效果(结合el-tree)相关推荐