SOURCE

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);
    },
  }
})

<!-- 引入element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<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>

.mg10 {
  margin: 10px
}