element ui封装 tree下拉框
生活随笔
收集整理的這篇文章主要介紹了
element ui封装 tree下拉框
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
展示：
子組件封裝
<!-- 樹(shù)狀選擇器 科室樹(shù)形 --> <template><el-popoverref="popover"placement="bottom-start"trigger="click"@show="onShowPopover"@hide="onHidePopover"><el-treeref="tree"class="select-tree"highlight-current:style="`min-width: ${treeWidth}`":data="data":props="props":expand-on-click-node="false":filter-node-method="filterNode":default-expand-all="true"@node-click="onClickNode"></el-tree><el-inputslot="reference"ref="input"v-model="labelModel"clearable:style="`width: ${width}%`":class="{ 'rotate': showStatus }"suffix-icon="el-icon-arrow-down":placeholder="placeholder"></el-input></el-popover> </template><script> import { getTreeList } from '@/api/commonApi' export default {name: 'Pagination',props: {// 接收綁定參數(shù)value: {type: String,default: '1'},// 輸入框?qū)挾?/span>width: String,// 輸入框占位符placeholder: {type: String,required: false,default: '請(qǐng)選擇'},// 樹(shù)節(jié)點(diǎn)配置選項(xiàng)props: {type: Object,required: false,default: () => ({value: 'key',label: 'title',children: 'children'})}},// 設(shè)置綁定參數(shù)model: {prop: 'value',event: 'selected'},computed: {// 是否為樹(shù)狀結(jié)構(gòu)數(shù)據(jù)dataType() {const jsonStr = JSON.stringify(this.options)return jsonStr.indexOf(this.props.children) !== -1},// 若非樹(shù)狀結(jié)構(gòu)，則轉(zhuǎn)化為樹(shù)狀結(jié)構(gòu)數(shù)據(jù)data() {return this.dataType ? this.options : this.switchTree()}},watch: {labelModel(val) {if (!val) {this.valueModel = ''}this.$refs.tree.filter(val)},value(val) {this.value = val},valueModel(val){if(!val){return}this.timer = setTimeout(() => {this.labelModel = this.queryTree(this.options,val)})}},data() {return {// 樹(shù)狀菜單顯示狀態(tài)showStatus: false,// 菜單寬度treeWidth: 'auto',// 輸入框顯示值labelModel: '',// 實(shí)際請(qǐng)求傳值valueModel: '0',// 數(shù)據(jù)列表options: [],timer:null}},created() {this.value&&this.getLabel(this.value)// 檢測(cè)輸入框原有值并顯示對(duì)應(yīng) labelthis.gettreetable()// 獲取輸入框?qū)挾韧街翗?shù)狀菜單寬度this.$nextTick(() => {this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`})},methods: {getLabel(val){this.labelModel = val},gettreetable() {getTreeList({menuName: 'ehis_dept',pageSearchType: 'all',searchConditions: '[]',sortType: 'asc',sortcol: ['id'],tableType: 'col'}).then((res) => {this.options = res.allData// if (this.value) {this.labelModel = this.queryTree(this.options, this.valueModel)// }}).catch((err) => {console.log(err)})},// 單擊節(jié)點(diǎn)onClickNode(node) {this.labelModel = node[this.props.label]this.valueModel = node[this.props.value]this.$emit('getdocotorlist', this.valueModel)this.onCloseTree()},// 偏平數(shù)組轉(zhuǎn)化為樹(shù)狀層級(jí)結(jié)構(gòu)switchTree() {return this.cleanChildren(this.buildTree(this.options, '0'))},// 隱藏樹(shù)狀菜單onCloseTree() {this.$refs.popover.showPopper = false},// 顯示時(shí)觸發(fā)onShowPopover() {this.showStatus = truethis.$refs.tree.filter(false)},// 隱藏時(shí)觸發(fā)onHidePopover() {this.showStatus = falsethis.$emit('selected', this.valueModel)},// 樹(shù)節(jié)點(diǎn)過(guò)濾方法filterNode(query, data) {if (!query) {return true}return data[this.props.label].indexOf(query) !== -1},// 搜索樹(shù)狀數(shù)據(jù)中的 IDqueryTree(tree, id) {let stark = []stark = stark.concat(tree)while (stark.length) {const temp = stark.shift()if (temp[this.props.children]) {stark = stark.concat(temp[this.props.children])}if (temp[this.props.value] === id) {return temp[this.props.label]}}return ''},// 將一維的扁平數(shù)組轉(zhuǎn)換為多層級(jí)對(duì)象buildTree(data, id = '0') {const fa = (parentId) => {const temp = []for (let i = 0; i < data.length; i++) {const n = data[i]if (n[this.props.parent] === parentId) {n.children = fa(n.rowGuid)temp.push(n)}}return temp}return fa(id)},// 清除空 children項(xiàng)cleanChildren(data) {const fa = (list) => {list.map((e) => {if (e.children.length) {fa(e.children)} else {delete e.children}return e})return list}return fa(data)}},beforeUpdate(){clearTimeout(this.timer)this.timer = null} } </script><style> .el-input.el-input--suffix {cursor: pointer;overflow: hidden; } .el-input.el-input--suffix.rotate .el-input__suffix {transform: rotate(180deg); } .select-tree {max-height: 350px;overflow-y: scroll; } /* 菜單滾動(dòng)條 */ .select-tree::-webkit-scrollbar {z-index: 11;width: 6px; } .select-tree::-webkit-scrollbar-track, .select-tree::-webkit-scrollbar-corner {background: #fff; } .select-tree::-webkit-scrollbar-thumb {border-radius: 5px;width: 6px;background: #b4bccc; } .select-tree::-webkit-scrollbar-track-piece {background: #fff;width: 6px; } .el-tree-node.is-current > .el-tree-node__content {background-color: #86bfff !important;color: black; } </style>父組件使用
<select-tree :value="ruleForm.deptId" v-model="ruleForm.deptId" style="width:93%;"/>import SelectTree from '@/components/common/tree/selecttreecopy'components: { SelectTree },總結(jié)
以上是生活随笔為你收集整理的element ui封装 tree下拉框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 左右滑动栏
- 下一篇： 让数字保持在整数范围内