vue2多个搜索条件

使用el-select多个搜索条件都需要从后台取的时候，后台是直接返回的一个，需要根据key值去找到对应的数据，以及是多级的情况下，数据回显的问题

<el-row>
                  <el-col :span="8">
                    <el-form-item label="故事来源：">
                      <el-select clearable v-model="baseForm.programStroySource" placeholder="故事来源" @visible-change="handleVisibleChange('microskit_story_source')">
                        <el-option
                          v-for="item in storySourceList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="题材：">
                    // 多级的
                      <el-cascader
                        v-model="baseForm.programTheme"
                        :options="themeOptions"
                        placeholder="题材"
                        :show-all-levels="false"
                        clearable
                        @visible-change="handleVisibleChange('microskit_theme')"
                      ></el-cascader>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="节目类型：">
                      <el-select clearable v-model="baseForm.programType" placeholder="节目类型" @visible-change="handleVisibleChange('microskit_program_type')">
                        <el-option
                          v-for="item in projectTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="年代：">
                      <el-select clearable v-model="baseForm.programYears" placeholder="年代" @visible-change="handleVisibleChange('microskit_year')">
                        <el-option
                          v-for="item in yearsDataList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item required label="送审通道：" prop="channelName">
                      <el-select clearable v-model="baseForm.channelName" placeholder="通道" @visible-change="thoroughfareData">
                        <el-option
                          v-for="item in thoroughfareList"
                          :key="item.channelId"
                          :label="item.channelName"
                          :value="item.channelId">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                // 故事来源
      storySourceList: [],
      // 故事题材
      themeOptions: [],
      // 节目类型
      projectTypeList: [],
      // 年代
      yearsDataList: [],
      thoroughfareList: [], // 通道数据
      handleVisibleChange(dictKey) {
      if (dictKey === 'microskit_story_source') {
        this.fetchStorySourceList();
      } else if (dictKey === 'microskit_program_type') {
        this.fetchProgramTypeList();
      } else if (dictKey === 'microskit_theme') {
        this.fetchThemeList(dictKey);
      } else if (dictKey === 'microskit_year') {
        this.fetchYearList();
      }
    },
     // 故事来源
    fetchStorySourceList() {
      const reqConfig = {
        url: '',
        method: "post",
        data: {
          dictKey: 'microskit_story_source'
        }
      };
      this.$request(reqConfig).then((res) => {
        console.log('获取数据', res);
        if (res.code === 200000) {
          this.storySourceList = Object.keys(res.data).map(key => ({
            value: res.data[key],
            label: res.data[key]
          }))
        }})
    },
    // 题材 其他的都是一样的，就不重复写了。题材是多级的，所以需要额外处理一下
    fetchThemeList(dictKey) {
      const reqConfig = {
        url: '',
        method: "post",
        data: {
          dictKey: dictKey
        }
      };
      this.$request(reqConfig).then((res) => {
        console.log('获取数据', res);
        if (res.code === 200000) {
          const themes = Object.keys(res.data).map(key => ({
            value: key,
            label: res.data[key],
            children: []
          }));
          this.themeOptions = themes;
          this.createSubThemes();
        }
      })
    },
    createSubThemes() {
      this.themeOptions.forEach(theme => {
        const subReqConfig = {
          url: '',
          method: "post",
          data: {
            dictKey: `microskit_theme_${theme.value}`,
          },
        };
        this.$request(subReqConfig).then((subRes) => {
          if (subRes.code === 200000) {
            theme.children = Object.keys(subRes.data).map(subKey => ({
              value: subRes.data[subKey],
              label: subRes.data[subKey],
            }));
          }
        });
      })
    },

以上就是多个搜索条件去调用接口，可能会涉及到回显，其他的都是没有问题的，直接从后台获取到数据，直接赋值就可以，但是题材就需要额外处理一下

// 获取数据
initPage() {
const reqConfig = {
            url: '',
            method: 'post',
            headers: {
              "Content-Type": this.$enumConfig.CONTENT_TYPE.JSON,
            },
            data: id
          }
       this.$request(reqConfig).then((res) => {
            if (res.code === 200000) {
              console.log(res.data)
              // 提交成功之后，数据要回显的
              this.baseForm = res.data
              this.handleVisibleChange('microskit_theme') // 这块就是需要自动调用一下 题材的，就可以实现回显了
            } else {
              console.log('err')
            }
          })
        } else {
          this.$message.error('表单数据有误，请检查后重试');
        }
}