北京大型网站建设,免费制作网站的软件,企业网站的网页设计,银川360推广 网站建设前言
本文章是本人在开发过程中#xff0c;遇到使用树形数据#xff0c;动态单选或多选的需求#xff0c;element中没有这种组件#xff0c;故自己封装一个#xff0c;欢迎多多指教
开发环境#xff1a;element-UI、vue2
组件效果
单选 多选 组件引用
treeselec…前言
本文章是本人在开发过程中遇到使用树形数据动态单选或多选的需求element中没有这种组件故自己封装一个欢迎多多指教
开发环境element-UI、vue2
组件效果
单选 多选 组件引用
treeselect v-modelform.parentId:optionsdeptOptions:props{value:id,label:name,children: children}:placeholder选择上级部门/
组件代码
templatedivel-selectreftreeSelectpopper-classcustom-select-popperstylewidth: 100%v-modelvalueLabel:clearableclearable:placeholderplaceholder:multiplemultipleclearhandleClearremove-taghandleRemoveTagel-input v-iffilterv-modelfilterText:placeholderfilterPlaceholder stylemargin-top: -6px;/el-option :valuevalue :labeloption.name classselect-optionsel-treeidtree-optionreftreeSelectTree:accordionaccordion:dataoptions:propsprops:node-keyprops.value:highlight-current!multiple:show-checkboxmultiple:check-strictlycheckStrictly:default-expand-allexpandAll:expand-on-click-nodemultiple:filter-node-methodfilterNodenode-clickhandleNodeClickcheckhandleNodeCheckboxspan slot-scope{ node, data } classtree_label{{ node.label }}/span/el-tree/el-option/el-select/div
/template
script
export default {name: TreeSelect,model: {prop: value,event: change},props: {value: {type: [String, Number, Object, Array],default: () {return }},clearable: {type: Boolean,default: true},placeholder: {type: String,default: 请选择},multipleLimit: {type: Number,default: 2},//--------- filter props -----filter: {type: Boolean,default: true},filterPlaceholder: {type: String,default: 请输入关键字},//----- tree props -----accordion: {type: Boolean,default: false},options: {type: Array,default: () {return []}},props: {type: Object,default: () {return {value: id,label: label,children: children}}},expandAll: {type: Boolean,default: false},checkStrictly: {type: Boolean,default: false}},data() {return {tp: {value: id,label: label,children: children,prentId: parentId},multiple: false,valueLabel: [],option: {id: ,name: },filterText: undefined,valueId: [],treeIds: []}},watch: {valueId() {if (this.multiple) {let valueStr if (this.value instanceof Array) {valueStr this.value.join()} else {valueStr this.value}if (valueStr ! this.valueId.join()) {this.$emit(change, this.valueId)}} else {let id this.valueId.length 0 ? this.valueId[0] : undefinedif (id ! this.value) {this.$emit(change, id)}}},value: {handler(newVal, oldVal) {if (newVal ! oldVal) {this.init()}}},filterText: {handler(newVal, oldVal) {if (newVal ! oldVal) {this.$refs.treeSelectTree.filter(newVal)}}}},mounted() {for (let key in this.tp) {if (this.props[key] ! undefined) {this.tp[key] this.props[key]}}this.multiple this.multipleLimit 1this.init()this.$nextTick(() {if (this.multiple) {document.getElementsByClassName(el-select__tags)[0].style.maxHeight document.getElementsByClassName(el-select)[0].offsetHeight * 2 - 4 px}})},methods: {init() {if (this.value instanceof Array) {this.valueId this.value} else if (this.value undefined) {this.valueId []} else {this.valueId [this.value]}if (this.multiple) {for (let id of this.valueId) {this.$refs.treeSelectTree.setChecked(id, true, false)}} else {this.$refs.treeSelectTree.setCurrentKey(this.valueId.length 0 ? this.valueId[0] : undefined)}this.initValueLabel()this.initTreeIds()this.initScroll()},// 初始化滚动条initScroll() {this.$nextTick(() {let scrollWrap document.querySelectorAll(.el-scrollbar .el-select-dropdown__wrap)[0]scrollWrap.style.cssText margin: 0px; max-height: none; overflow: hidden;let scrollBar document.querySelectorAll(.el-scrollbar .el-scrollbar__bar)scrollBar.forEach((ele) (ele.style.width 0))})},initTreeIds() {let treeIds []let _this thisfunction traverse(nodes) {for (let node of nodes) {treeIds.push(node[_this.tp.value])if (node[_this.tp.children]) {traverse(node[_this.tp.children])}}}traverse(this.options)this.treeIds treeIds},initValueLabel() {let labels []let _this thisfor (let id of this.valueId) {let node this.traverse(this.options, node node[_this.tp.value] id)if (node) {labels.push(node[_this.tp.label])}}if (this.multiple) {this.valueLabel labelsthis.option.name labels.join()} else {this.valueLabel labels.length 0 ? labels[0] : undefinedthis.option.name this.valueLabel}},traverse(tree, func) {for (let node of tree) {if (func(node)) {return node}if (node[this.tp.children]) {let result this.traverse(node[this.tp.children], func)if (result ! undefined) {return result}}}return undefined},handleClear() {this.valueLabel []this.valueId []if (this.multiple) {for (let id of this.treeIds) {this.$refs.treeSelectTree.setChecked(id, false, false)}} else {this.$refs.treeSelectTree.setCurrentKey(null)}},/* 树filter方法 */filterNode(value, data) {if (!value) return truereturn data[this.props.label].indexOf(value) ! -1},/* 树节点点击事件 */handleNodeClick(data, node) {if (!this.multiple) {this.filterText this.valueId [data[this.tp.value]]}if(node.childNodes){node.expanded true}},handleNodeCheckbox(data, node) {if (this.multiple) {if (this.multipleLimit node.checkedKeys.length) {this.valueId node.checkedKeys} else {this.$refs.treeSelectTree.setChecked(data, false, !this.checkStrictly)this.$message.error(最多选择 this.multipleLimit 项)}}},handleRemoveTag(tag) {let n this.traverse(this.options, node node[this.tp.label] tag)if (n) {this.$refs.treeSelectTree.setChecked(n[this.tp.value], false, !this.checkStrictly)}this.valueId this.$refs.treeSelectTree.getCheckedKeys()}}
}/scriptstyle scoped langscss
::v-deep .el-select__tags {overflow: auto;
}
.custom-select-popper{}.el-scrollbar {.el-scrollbar__view {.el-select-dropdown__item {height: auto;max-height: 300px;padding: 0;overflow: hidden;overflow-y: auto;}.el-select-dropdown__item.selected {font-weight: normal;}}
}ul li {.el-tree {.el-tree-node__content {height: auto;padding: 0 20px;}.el-tree-node__label {font-weight: normal;}.is-current .el-tree-node__label{color: #409eff;font-weight: 700;}}
}.tree_label {line-height: 23px;.label_index {background-color: rgb(0, 175, 255);width: 22px;height: 22px;display: inline-flex;border-radius: 4px;.label_index_font {color: #ffffff;width: 100%;text-align: center;}}
}
/style
