mr-wiill / el-tree-select Goto Github PK
View Code? Open in Web Editor NEW基于el-select和el-tree改造的树形选择器(下拉框)组件
基于el-select和el-tree改造的树形选择器(下拉框)组件
下拉的数据和默认选中的是从接口中获取的,第一次加载的时候是显示默认值,修改js保存,页面自动刷新的时候才会把接口的默认值传递过去
没办法多选
你正在开发中的下拉多选树,多选树中的中文title,即valuesTitle数组中不能有重复值,有重复值就会报错,要是能解决就好了
页面存在多个下拉框存在时,引入Tree,选中好数据后,会导致其他下拉框的下拉定位错误。去掉clearSelected()和initScroll(),就没有这样的问题。
动态加载的tree数据 设置默认的时候失效,不能默认选中,大家有遇到这个问题吗
:value="", 无法双向绑定,只能通过@getvalue取值
@KBeginner
// 初始化值
initHandle(){
if(this.valueId){
let node = this.$refs.selectTree.getNode(this.valueId)
if(node != null) {
this.valueTitle = node.data[this.props.label] // 初始化显示
this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
this.defaultExpandedKey = [this.valueId] // 设置默认展开
}
} else {
this.valueTitle = '' // 清除缓存显示
}
this.$nextTick(()=>{
let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
scrollBar.forEach(ele => ele.style.width = 0)
})
},
是否可以打包成js, 发布到CDN,可以直接引入js就可以使用
数据多的时候 滚动条会滚动到底部 不能定位到当前位置
It'll scroll down to the bottom
watch改成如下:
watch: {
value() {
this.valueId = this.value;
this.initHandle();
},
options: {
handler(newValue, oldValue) {
this.valueId = this.value;
this.initHandle();
},
deep: true
}
},
methods 里面 initHandle函数改成如下:
// 初始化值
initHandle() {
if (this.valueId) {
this.$nextTick(() => {
let node = this.$refs.selectTree.getNode(this.valueId);
if (node != null) {
this.valueTitle = node.data[this.props.label]; // 初始化显示
this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
this.defaultExpandedKey = [this.valueId]; // 设置默认展开
}
});
} else {
this.valueTitle = ""; // 清除缓存显示
}
this.initScroll();
},
Originally posted by @luwzchn in #9 (comment)
首先,感谢大佬的组件.
其次,有个bug希望可以解答一下.引入使用之后就报了data错误,这是什么情况?
选择完后不能自动关闭select问题。导致不能用这个组件了~~
<SelectTree
:props="props"
:options="optionData"
:value="valueId"
:treeName="treeName"
:clearable="isClearable"
:accordion="isAccordion"
@getValue="getValue($event)"/>
<SelectTree
:props="props"
:options="optionData1"
:value="valueId1"
:treeName="treeName1"
:clearable="isClearable"
:accordion="isAccordion"
@getValue="getValue($event)"/>
会出现选第二个组件时,watch 里的this 会变为第一个的,更新第一个组件的情况。
去除了handleNodeClick方法中的this.$emit('getValue',this.valueId)以后解决。
请问在什么情况下发生了上下文的变化,如何解决
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.