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>