600字范文 > vue实现树形下拉框可多选封装组件及应用

vue实现树形下拉框可多选封装组件及应用

时间：2021-04-30 23:15:20

效果图：

封装组件：TreeSelect.vue

<template><div style="width:284px;display: inline-block;margin-left: -5px"><el-popover placement="bottom-start":width="width"trigger="manual"v-model="isShowSelect"@hide="popoverHide"clearable><el-tree class="common-tree":style="style"clearableref="tree":data="data":props="defaultProps":show-checkbox="multiple":node-key="nodeKey":check-strictly="checkStrictly"default-expand-all:expand-on-click-node="false":default-checked-keys="defaultCheckedKeys":highlight-current="true"@node-click="handleNodeClick"@check-change="handleCheckChange"></el-tree><el-select :style="selectStyle"slot="reference"ref="select"v-model="selectedData":multiple="multiple"collapse-tagsclearable@click.native="isShowSelect = !isShowSelect"class="tree-select"><el-option v-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-popover></div></template><script>export default {name: "tree-select",// props: ["clear"],props: {// 树结构数据data: {type: Array,default () {return [];}},// 是否可选根节点rootNodeChick: Boolean,// 是否清空数据clear: Number,defaultProps: {type: Object,default () {return {};}},// 配置是否可多选multiple: {type: Boolean,default () {return false;}},nodeKey: {type: String,default () {return "id";}},// 显示复选框情况下，是否严格遵循父子不互相关联checkStrictly: {type: Boolean,default () {return false;}},// 默认选中的节点key数组checkedKeys: {type: Array,default () {return [];}},width: {type: Number,default () {return 260;}},height: {type: Number,default () {return 360;}},},data () {return {defaultCheckedKeys: [],isShowSelect: false, // 是否显示树状选择器options: [],selectedData: [], // 选中的节点style: "width:" + this.width + "px;" + "height:" + this.height + "px;",selectStyle: "width:" + (this.width + 24) + "px;",checkedIds: [],checkedData: []};},mounted () {if (this.checkedKeys.length > 0) {if (this.multiple) {this.defaultCheckedKeys = this.checkedKeys;this.selectedData = this.checkedKeys.map(item => {var node = this.$refs.tree.getNode(item);return node.label;});} else {var item = this.checkedKeys[0];this.$refs.tree.setCurrentKey(item);var node = this.$refs.tree.getNode(item);this.selectedData = node.label;}}},methods: {loadCheckedKeys () {if (this.checkedKeys.length > 0) {if (this.multiple) {this.defaultCheckedKeys = this.checkedKeys;this.selectedData = this.checkedKeys.map(item => {var node = this.$refs.tree.getNode(item);return node.label;});} else {var item = this.checkedKeys[0];this.$refs.tree.setCurrentKey(item);var node = this.$refs.tree.getNode(item);this.selectedData = node.label;}}},changeIsShowSelect () {this.isShowSelect = false;},popoverHide () {if (this.multiple) {this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据} else {this.checkedIds = this.$refs.tree.getCurrentKey();this.checkedData = this.$refs.tree.getCurrentNode();}this.$emit("popoverHide", this.checkedIds, this.checkedData);},// 节点被点击时的回调,返回被点击的节点数据handleNodeClick (data, node) {if (!this.multiple) {let tmpMap = {};tmpMap.value = node.key;tmpMap.label = node.label;this.options = [];this.options.push(tmpMap);this.selectedData = node.label;this.isShowSelect = !this.isShowSelect;}},// 节点选中状态发生变化时的回调handleCheckChange () {var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据this.options = [];if (!this.rootNodeChick)checkedKeys.forEach(item => {var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的nodelet tmpMap = {};if (node.childNodes.length == 0) {tmpMap.value = node.key;tmpMap.label = node.label;this.options.push(tmpMap);}});elsethis.options = checkedKeys.map(item => {var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的nodelet tmpMap = {};tmpMap.value = node.key;tmpMap.label = node.label;return tmpMap;});this.selectedData = this.options.map(item => {return item.label;});}},watch: {isShowSelect (val) {// 隐藏select自带的下拉框this.$refs.select.blur();},clear: function (n, o) {//箭头函数不然会发生this改变if (n != 0) {this.selectedData = [];this.$nextTick(() => {this.$refs.tree.setCheckedKeys([]);});}},selectedData: function (newData, oldData) {this.popoverHide();if (newData == undefined ||newData == null ||newData == [] ||newData.length == 0)this.$refs.tree.setCheckedKeys([]);}}};</script><style scoped>.mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;opacity: 0;z-index: 999;}.common-tree {overflow: auto;}</style><style>.tree-select .el-select__tags .el-tag .el-tag__close {display: none;}.tree-select .el-select__tags .el-tag .el-icon-close {display: none;}</style>

调用：

import TreeSelect from "./TreeSelect";//改为自己的路径export default {components: { TreeSelect },data () {return {//下拉树isShowSelect: false,//选择面板，默认隐藏officeTreeList: [],//树形结构数据selectedOfficeIds: '',//选择后返回的选中id，以逗号拼接selectedOffices: [],//选择后返回的选中对象，clearTreeSelect: 0,defaultProps: {children: "children",//树形结构数据中对应的属性名称，可改为自己数据中属性label: "label"//树形结构数据中对应的属性名称，可改为自己数据中属性},nodeKey: "id",//树形结构数据中对应的属性名称，可改为自己数据中属性defaultCheckedKeys: [],//默认初次选中的数据}}

页面：

<tree-select ref="treeSelect":data="officeTreeList"placeholder="请选择":defaultProps="defaultProps"@parent-event="popoverHide"multiple:clear="clearTreeSelect":nodeKey="nodeKey":checkedKeys="defaultCheckedKeys"@popoverHide="popoverHide"></tree-select>

methods：

popoverHide (checkedIds, checkedData) {this.selectedOfficeIds = checkedIds;//this.selectedOffices = checkedData;//此数据没大用，可注释//if (checkedData != undefined && checkedData != null) {//checkedData.forEach(item => {//if (item.children == undefined || item.children == null) {//this.selectedOffices.push(item.id);//}//});//}},

在父组件的最外层div上加个@click="divClick”事件，控制选择面板的显隐：

divClick () {this.$nextTick(() => {this.$refs.treeSelect.changeIsShowSelect();})},

附加说明：

//数据加载完成后，（以下是树形结构）this.officeTreeList=[{"id": "0","label": "作品分类","icon": "offices","url": null,"state": "open","children": [{"id": "o58","label": "金庸作品集","icon": "fold","url": null,"state": "open","children": [{"id": "o62","label": "武侠类","icon": "fold","url": null,"state": "open","children": [{"id": "o103","label": "天龙八部","icon": "office","url": null,"state": "open","children": [],"levelId": 0,"parentId": "o62","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null},{"id": "o104","label": "射雕英雄传","icon": "office","url": null,"state": "open","children": [],"levelId": 0,"parentId": "o62","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null}],"levelId": 0,"parentId": "o58","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null}],"levelId": 0,"parentId": "0","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null},{"id": "o110","label": "古龙作品集","icon": "fold","url": null,"state": "open","children": [{"id": "o59","label": "绝代双骄","icon": "office","url": null,"state": "open","children": [],"levelId": 0,"parentId": "o110","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null},{"id": "o60","label": "楚留香传奇","icon": "office","url": null,"state": "open","children": [],"levelId": 0,"parentId": "o110","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null}],"levelId": 0,"parentId": "0","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null},{"id": "o107","label": "琼瑶作品集","icon": "office","url": null,"state": "open","children": [],"levelId": 0,"parentId": "0","role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null}],"levelId": 0,"parentId": null,"role": null,"selectNode": null,"params": null,"disabled": false,"message": null,"remarkMap": null}];this.defaultCheckedKeys.push('o60');//默认选中楚留香传奇this.$nextTick(() => {this.$refs.treeSelect.loadCheckedKeys();})this.selectedOfficeIds = ['o60'];//第一次手动放进去，以后就直接用这个变量即可

感谢文章：/qq_32786139/article/details/108345247

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。

vue实现树形下拉框 可多选 封装组件及应用

vue实现树形下拉框可多选封装组件及应用