el-select-tree下拉树实现单选
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了el-select-tree下拉树实现单选相关的知识，希望对你有一定的参考价值。
参考技术A 需求是单选，复选框做了单选，点击节点也能选中，不过选中就变成了多选，不受 multiple: false ,的控制了。解决方法：
就是在选择节点的时候，也做成单选：
*关键点在单选的时候清空所有组织树，只保留当前选中的节点：
vue.js实现单选框复选框和下拉框
记录一下 为了自己查找方便
Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。
一、单选框
<div id="app">
<label>男<input type="radio" v-model="gender" value="man"/></label> <label>女<input type="radio" v-model="gender" value="woman"/></label>
<p>已选：{{gender}}</p>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
gender:''
}
});
</script>
二、复选框
<div id="app">
<label>jack<input type="checkbox" v-model="person.jack"/></label>
<label>bob<input type="checkbox" v-model="person.bob"/></label>
<label>alice <input type="checkbox" v-model="person.alice"/></label>
<p>已选：{{person}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
person: {jack: false, bob: false, alice: false}
}
})
</script>
三、下拉框
<div id="app">
<select v-model="selected">
<option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
</select>
<span>已选:{{selected}}</span>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],
selected:''
}
});
</script>
以上是关于el-select-tree下拉树实现单选的主要内容，如果未能解决你的问题，请参考以下文章