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

Krui
  • 116

下拉框选中一个的时候下面显示对应的工序列表
image.png
如图:
image.png
代码如下:

<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拿到
image.png

回复
阅读 4.8k
4 个回答
✓ 已被采纳

解决如下:

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

就是想要 fluContentList 的id 是嘛?如果是的话,change绑定的事件代码如下:

getPreset() {
    const selected = this.fluContentList.find(item => {item.fluContent ===  this.baseInfo.fluText});
    const id = selected ? selected['id'] : '';
}
<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>
宣传栏