基于element-ui2.x扩展下拉树
No Data
import ElTreeSelect from 'el-tree-select'; vue.use(ElTreeSelect); 内部直接使用 :
multiple 改为内置,通过v-model类型判断是否多选 :filterable="false" 搜索从弹出框里面执行
:show-checkbox="selectParams.multiple" 使用下拉框参数multiple 判断是否对树进行多项 取消对el-tree的人为传参show-checkbox :node-key="propsValue" 自动获取treeParams.props.value :draggable="false" 屏蔽拖动
selectParams : 支持el-select 相关参数styles参数:
styles 对el-select设置style,类型:Object
selectClass参数:
selectClass 对el-select设置class,类型:String
treeParams : 支持el-tree 相关参数 增加:'clickParent' treeParams.clickParent 类型:Boolean 默认:false 在selectParams.multiple=false单选情况下点击节点,判断是否关闭弹出框 clickParent: true 允许点击父级关闭弹出框 false 只能点击子级关闭弹出框
popperClass 对应:popper-class,类型:String
treeParams.filterable Boolean 考虑是显示在弹出框内的,因此放到treeParams参数内
filter-node-method 自定义过滤方式
select-clear 下拉框清空事件 this.$emit('select-clear');
removeTag 移除单个标签,返回所有勾选的ids,以及当前移除的tag(可能为中文)标签 this.$emit('removeTag',ids,tag);
树点击,和el-tree参数一致: this.$emit('node-click', data, node, vm);
勾选触发,和el-tree参数一致: this.$emit('check',data, node, vm);
treeDataUpdateFun 树更新数据this.post(url,postobj,response=>{ this.$refs.treeSelect.treeDataUpdateFun(response.data); });
searchFun(value){ // 如果是本地过滤: this.$refs.treeSelect.$refs.tree.filter(value); // 可以直接访问方法,也可以拿到 $refs.tree this.$refs.treeSelect.filterFun(val); // 如果是请求后台: this.post(url,postobj:{ keywords:value },response=>{ this.$refs.treeSelect.treeDataUpdateFun(response.data); }); }
this.$refs.treeSelect.filterFun(val);
3.1.13 1.增加demo调试。 2.处理clickParent点击父节点判断问题。 3.打包优化,不再强制打包vue,element-ui。(要求项目必须引入element-ui) 3.1.12 增加参数:子叶节点返回过滤(treeParams->leafOnly, includeHalfChecked) 3.1.11 增加参数:filter-node-method 3.1.10 修复bug:多选下如果父子节点全选,el-tag单一节点取消失败。 3.1.9 锁定element-ui最终版本2.13.2。修复bug:多选下如果父子节点全选,el-tag单一节点取消失败。 3.1.8 增加popover获取鼠标对象的多浏览器兼容性判断 3.1.7 处理popover隐藏时判断当前对象报错问题 3.1.4 去掉selectParams.multiple参数,改为内置,由v-model判断类型,v-model增加Number类型 3.1.3 扩展,支持下拉框和popover挂类,修复了文档说明bug 3.1.2 扩展,支持挂类 3.1.1 默认v-model增加兼容性判断 3.1.0 升级为vue-cli3,添加部分测试,添加api文档 3.0.16 修复disabled还能点击的问题 3.0.15 增加disabled参数判断 3.0.15 增加treeParams.clickParent参数,默认false,只允许点击子级关闭弹出框 3.0.13 1.增加判断multiple,如果多选,点击父级不关闭弹出框 2.修复点击节点没有切换多选问题 3.修复多选时下拉框没有更新位置问题 4.优化代码 3.0.12 修复文本框修改宽度之后,下拉框不一致 3.0.11 修复子节点名称不为children时,tag勾选联动问题 3.0.10 修复单选状态下清空报错问题,优化逻辑判断 3.0.9 增加树check方法,修复select多选移除时树没有联动取消勾选问题 3.0.8 修复treeDataUpdateFun更新数据时,单选没有赋值问题 3.0.7 修复v-model问题 3.0.6 增加对el-select设置style 3.0.5 提取dom.js精简,缩小体积 3.0.4 修复搜索框焦点隐藏弹出框问题 3.0.3 增加disabled,打包压缩 3.0.2 增加容错判断 3.0.1 修复IE9以上兼容性 3.0.0 全新api,支持el-tree,el-select相关参数 2.0.6:增加搜索栏隐藏参数,从业务上考虑clickParent=true隐藏父级,展开搜索只在三角箭头点击 2.0.5:demo增加子节点测试数据 2.0.4:清空选择增加事件clearFun 2.0.3:新增清空选择,clearable默认为true 2.0.2:优化:默认clickParent=true,取消箭头图标点击事件使用input默认点击 2.0.0:修复IE兼容性,修复打包有压缩警告问题,剥离element-ui,可作为独立插件使用 1.6.5:有压缩不成功的警告(webpack配置压缩对element-ui下的request不生效) 1.6.0:修复element-ui打包会有压缩不成功的警告,锁定package.json的vue,element-ui版本 1.5.0:修复element-ui更新之后不显示插件的问题 1.4.9:demo的名称导入错误修改 1.4.8:修复部分代码打包没有压缩问题 1.4.7:props.id改为props.value 1.4.6:修复clickParent=true之后点击父级关闭下拉问题,补全API:disabled 1.4.5:修改webpack配置,打包css忽略z-index 1.4.4:增加CSS样式 1.4.3:增加clickParent,判断树菜单点击是否支持直接点击父级
npm install el-tree-select --save-dev
https://github.com/ayiaq1/el-tree-select