vue基于element-ui实现的动态多级联动下拉选择
<template>
<div id="app">
<!-- <select
v-for="(arrItem, key) in selectList"
v-model="selectArr[key]"
@focus="position = key"
@change="selected"
:key="key"
style="margin: 10px; padding: 10px"
>
<option v-for="item in arrItem" :value="item.value" :key="item.value">
{{ item.label }}
</option>
</select> -->
<!-- <p>选中项: {{ selectArr }}</p> -->
<el-select
v-for="(arrItem, key) in selectList"
:key="key"
v-model="selectArr[key]"
filterable
placeholder="请选择"
value-key="value"
@change="selected"
@focus="position = key"
class="mg10"
>
<el-option
v-for="item in arrItem"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
<p class="mg10">选中项：{{ selectArr }}</p>
</div>
</template>
<script>
export default {
data() {
return {
position: null,
selectArr: ["第1级-选项1"],
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);
},
// selected(e) {
// var current = e.target.value; //获取选中值(实际项目可通过此值调接口获取下一级选项)
// 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);
// },
},
};
</script>
<style scoped>
</style>
<!-- 引入element-ui样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style>.mg10 { margin: 10px } </style> <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" class="mg10"> <el-option v-for="item in arrItem" :key="item.value" :label="item.label" :value="item"> </el-option> </el-select> <p class="mg10"> 选中项：{{selectArr}} </p> </div> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue"> </script> <!-- 引入element-ui组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"> </script> <script>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); }, } })</script>
不用element
<template>
<div id="app">
<select
v-for="(arrItem, key) in selectList"
v-model="selectArr[key]"
@focus="position = key"
@change="selected"
:key="key"
style="margin: 10px; padding: 10px"
>
<option v-for="item in arrItem" :value="item.value" :key="item.value">
{{ item.label }}
</option>
</select>
<p>选中项: {{ selectArr }}</p>
</div>
</template>
<script>
export default {
data() {
return {
position: null,
selectArr: ["第1级-选项1"],
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(e) {
var current = e.target.value; //获取选中值(实际项目可通过此值调接口获取下一级选项)
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);
},
},
};
</script>
<style scoped>
</style>
