elementui select多級聯動

場景：有時候有a，b，c三個下拉選項，b依賴a的選擇，c依賴b的選擇。本文實現了兩級聯動，三級聯動同理實現

 

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>選擇腳本</span>
          </div>
          <div style="height:180px;">
            <el-form ref="scriptConfigForm" :model="scriptConfigForm">
              <el-form-item label="項目">
                <el-select
                  v-model="scriptConfigForm.project"
                  size="small"
                  style="width:70%"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="remoteProjectMethod"
                  :loading="projectLoad"
                  @visible-change="handleChangeFlag"
                >
                  <el-option
                    v-for="item in projectOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="腳本">
                <el-select
                  v-model="scriptConfigForm.script"
                  size="small"
                  style="width:70%"
                  @visible-change="handleChangeFlag"
                >
                  <el-option
                    v-for="item in scriptOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

 

export default { 
    data() {
        return {
            scriptConfigForm: {
                project: '',
                script: '',
                appids: ''
            },
            changeFlag: false
        }
    watch: {
        'scriptConfigForm.project'(e) {
        if (this.changeFlag) {
            this.scriptConfigForm.script = ''
        }
        if (e) {
            this.scriptOptions.splice(0, this.scriptOptions.length)
            this.fetchListScript(e)
        }
        }
    },
    methods:{
        fetchListScript(projectId) {
        fetchListScript(projectId).then(res => {
            for (var script of res.data.content) {
            this.scriptOptions.push({
                value: script.id,
                label: script.filename
            })
            }
        })
        },
        handleChangeFlag(type) {
        // select回調，判斷當前下拉框是否展示
        this.changeFlag = type
        }
    }
}

 

 

 

　　

　　

參考：　

通過watch監控字段變化

https://blog.csdn.net/only_neo/article/details/82825182 【可實現】

 

通過change監控值變化

https://www.freesion.com/article/59681102408/ 【可實現】