展示：

子组件封装

<!-- 树状选择器   科室树形  -->
<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: {// 接收绑定参数value: {type: String,default: '1'},// 输入框宽度width: String,// 输入框占位符placeholder: {type: String,required: false,default: '请选择'},// 树节点配置选项props: {type: Object,required: false,default: () => ({value: 'key',label: 'title',children: 'children'})}},// 设置绑定参数model: {prop: 'value',event: 'selected'},computed: {// 是否为树状结构数据dataType() {const jsonStr = JSON.stringify(this.options)return jsonStr.indexOf(this.props.children) !== -1},// 若非树状结构，则转化为树状结构数据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 {// 树状菜单显示状态showStatus: false,// 菜单宽度treeWidth: 'auto',// 输入框显示值labelModel: '',// 实际请求传值valueModel: '0',// 数据列表options: [],timer:null}},created() {this.value&&this.getLabel(this.value)// 检测输入框原有值并显示对应 labelthis.gettreetable()// 获取输入框宽度同步至树状菜单宽度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)})},// 单击节点onClickNode(node) {this.labelModel = node[this.props.label]this.valueModel = node[this.props.value]this.$emit('getdocotorlist', this.valueModel)this.onCloseTree()},// 偏平数组转化为树状层级结构switchTree() {return this.cleanChildren(this.buildTree(this.options, '0'))},// 隐藏树状菜单onCloseTree() {this.$refs.popover.showPopper = false},// 显示时触发onShowPopover() {this.showStatus = truethis.$refs.tree.filter(false)},// 隐藏时触发onHidePopover() {this.showStatus = falsethis.$emit('selected', this.valueModel)},// 树节点过滤方法filterNode(query, data) {if (!query) {return true}return data[this.props.label].indexOf(query) !== -1},// 搜索树状数据中的 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 ''},// 将一维的扁平数组转换为多层级对象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项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;
}
/* 菜单滚动条 */
.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 },

element ui封装 tree下拉框相关推荐

element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
修改element UI的select下拉框组件右边的小箭头（使用自定义图片）
i.el-select__caret {/*很关键:将默认的select选择框样式清除*/ appearance:none;-moz-appearance:none;-webkit-appearanc ...
VUE ELEMENT UI 清空select 下拉选项
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true&qu ...
element 动态加载下拉框_记一次很坑的需求：给element-cascader添加一个重置和确定按钮...
这帖子是不用多高超技术或者是什么歪门邪道,只是做的过程中遇到很多的坑,我感觉我做的这个没人能遇到比我还多 [因为使用场景而产生] 的坑...想记录一下,原本是产品叫我找别的级联的插件,我真的觉得不想在 ...
Android UI自定义Spinner下拉框（用popuwindow实现）-转
定义出第一个图片的布局和弹出框(一个listView)的布局,,这里就不在多说了~ListView需要自己定义一个MyspinnerAdapter~做好这些准备之后,就是弹出框的实现了~ prote ...
element UI 之 el-cascader 下拉多级单选，每一级均可选中
需求:element ui 中下拉多级单选,可选中每一级,如图: 封装了一个组件: select.vue template 中代码 <el-cascaderref="cascader& ...
element 动态加载下拉框_动态增加select框(elementUI 框架)
演示动态增加select框(elementUI 框架) @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css ...
element ui中select 下拉选择文字输入筛选
未修改代码前效果选择框中不可编辑如图:加入 filterable allow-create default-first-option 代码如下 <template><div> ...
element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...

element ui封装 tree下拉框

展示：

子组件封装

父组件使用

element ui封装 tree下拉框相关推荐

最新文章

热门文章