vue 用js让下拉框选中后回显数据

Question

下拉框选中一个的时候下面显示对应的工序列表

如图：

代码如下：

<el-form-item label="预设流程" prop="fluContent">
          <el-select
            v-model="baseInfo.fluText"
            placeholder="请选择"
            style="width: 200px"
            size="small"
            @change="getPreset()"
          >
            <template v-for="(item, index) in codeList.fluContentList">
              <el-option
                v-if="item.fluId != ''"
                :key="index"
                :label="item.fluText"
                :value="item.fluContent"
              />
            </template>
          </el-select>
        </el-form-item>

要拿到下面这个数据源fluContentList的id后来查需要工序列表 要怎么用change拿到

Answer 1

解决如下：

getPreset (value) {
        const selected = this.codeList.fluContentList.find(item => item.fluContent === value );
        getPresetDeatil(selected.fluId).then(res => {
            this.baseInfo.processInfoList = res.data.processInfos
            //console.log(this.baseInfo.processInfoList)
        })
    },

Answer 2

就是想要 fluContentList 的id 是嘛？如果是的话，change绑定的事件代码如下：

getPreset() {
    const selected = this.fluContentList.find(item => {item.fluContent ===  this.baseInfo.fluText});
    const id = selected ? selected['id'] : '';
}

Answer 3

<el-form-item label="预设流程" prop="fluContent">
          <el-select
            v-model="baseInfo.fluId"
            placeholder="请选择"
            style="width: 200px"
            size="small"
           >
            <template v-for="(item, index) in codeList.fluContentList">
              <el-option
                v-if="item.fluId != ''"
                :key="index"
                :label="item.fluText"
                :value="item.fluId"
              />
            </template>
          </el-select>
        </el-form-item>

Answer 4

根据@change事件拿到选中项，在选中项中拿到对应的id，再去根据id查询工序列表就可以了