vue基于element-ui的Select选择器实现的动态多级联动下拉选择
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
本文讲的是 vue基于 element-ui 的 Select选择器 实现的动态多级联动下拉选择
基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择
代码如下:
Html
<div id="app">
<el-select v-for="(arrItem,key) in selectList" :key="key" v-model="selectArr[key]"
filterable placeholder="请选择" value-key="value" @change="selected" @focus="position=key"
style="margin:10px">
<el-option v-for="item in arrItem" :key="item.value" :label="item.label"
:value="item">
</el-option>
</el-select>
<p>
选中项:{{selectArr}}
</p>
</div>
Js
var vm = new Vue({
el: '#app',
data: {
position: null,
selectArr: [],
selectList: [[{
value: '第1级-选项1',
label: '第1级-选项1'
},
{
value: '第1级-选项2',
label: '第1级-选项2'
},
{
value: '第1级-选项3',
label: '第1级-选项3'
},
{
value: '第1级-选项4',
label: '第1级-选项4'
},
{
value: '第1级-选项5',
label: '第1级-选项5'
}]]
},
methods: {
//模拟获取下一级选项(实际项目可通过接口获取或者根据实际情况自行修改)
addSelectList(index) {
return [{
value: '第' + (index + 2) + '级-选项1',
label: '第' + (index + 2) + '级-选项1'
},
{
value: '第' + (index + 2) + '级-选项2',
label: '第' + (index + 2) + '级-选项2'
},
{
value: '第' + (index + 2) + '级-选项3',
label: '第' + (index + 2) + '级-选项3'
},
{
value: '第' + (index + 2) + '级-选项4',
label: '第' + (index + 2) + '级-选项4'
},
{
value: '第' + (index + 2) + '级-选项5',
label: '第' + (index + 2) + '级-选项5'
}]
},
selected(item) {
// console.log(item); // item为当前选中项的对象
var nextSelect = this.addSelectList(this.position); //模拟获取下一级选项
this.selectList.splice(this.position + 1, this.selectList.length, nextSelect);
this.selectArr.splice(this.position + 1, this.selectArr.length);
},
}
})
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)