vue - el-select的@change属性自动填充其他输入框

keyu7

于 2024-04-26 11:23:19 发布

阅读量394

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_33484469/article/details/135849105

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中，通过el-select组件实现根据用户选择的接口ID，动态填充相关输入字段的示例。当接口ID改变时，会自动填充caseName、seqNo等字段的值。

摘要由CSDN通过智能技术生成

vue

html

        <el-form-item label="测试接口" prop="interfaceId">
          <el-select v-model="formDetailInfo.interfaceId" placeholder="请选择测试接口" @change="selectTestInterface">
            <el-option
              v-for="testInterface in this.testInterfaceList"
              :key="testInterface.interfaceName"
              :label="testInterface.interfaceName"
              :value="testInterface.interfaceId"
            />
          </el-select>
        </el-form-item>

script

    // 详情页面 根据接口ID自动填充相关输入框
    selectTestInterface() {
      const item = this.testInterfaceList.find(ti => ti.interfaceId === this.formDetailInfo.interfaceId);
      this.formDetailInfo.caseName = item.interfaceName;
      this.formDetailInfo.seqNo = new Date().getVarDate;
      this.formDetailInfo.reqMethod = item.reqMethod;
      this.formDetailInfo.reqProtocol = item.reqProtocol;
      this.formDetailInfo.reqDomain = item.reqDomain;
      this.formDetailInfo.reqPath = item.reqPath;
      this.formDetailInfo.reqHeader = item.reqHeader;
      this.formDetailInfo.reqParam = item.reqParam;
      this.formDetailInfo.reqData = item.reqData;
      this.formDetailInfo.resAssert = item.resAssert;
    }