Vue中的filter过滤和this.$set（）方法应用举例_this.$set(this.ruleform, 'filelist', [])-CSDN博客

本文链接：https://blog.csdn.net/qq_43124335/article/details/127407447

本文介绍了如何通过API获取背书账号，并实现账号选择后自动填充账户名、开户行及行号，确保数据不可修改。代码展示了如何使用Vue的el-select组件和v-model绑定，以及change事件处理函数来动态更新相关字段。

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

已知背书账号需要从接口中获得，需求是选择背书账号，背书账户名、背书开户行、背书开户行行号自动填充，且不可修改。

接口返回格式如下：

代码如下：

<el-col :lg="6" :md="8">
     <el-form-item label="背书账号" style="width:100%" prop="reqAcct">
          <el-select v-model="batchInfo.reqAcct" placeholder="请选择" style="width: 100%" @change="handleReqAcctChange">
             <el-option v-for="item in accountNoList" :key="item.id" :label="item.accountNo" :value="item.accountNo" />
           </el-select>
      </el-form-item>
</el-col>

<el-col :lg="6" :md="8">
    <el-form-item label="背书账户名" style="width:100%" prop="reqName">
        <el-input v-model="batchInfo.reqName" placeholder="选择背书账号后显示" disabled />
     </el-form-item>
</el-col>

 <el-col :lg="6" :md="8">
      <el-form-item label="背书开户行" style="width:100%" prop="reqBankName">
          <el-input v-model="batchInfo.reqBankName" placeholder="选择背书账号后显示" disabled />
      </el-form-item>
 </el-col>

<el-col :lg="6" :md="8">
   <el-form-item label="背书开户行行号" style="width:100%" prop="reqBankNo">
      <el-input v-model="batchInfo.reqBankNo" placeholder="选择背书账号后显示" disabled />
   </el-form-item>
</el-col>

// 改变背书账号下拉框数据
    handleReqAcctChange(val) {
        const accountInfo = this.accountNoList.filter(item => { return item.accountNo === val })
        this.$set(this.batchInfo, 'reqBankName', accountInfo[0].accountBankName)
        this.$set(this.batchInfo, 'reqBankNo', accountInfo[0].accountBankNo)
        this.$set(this.batchInfo, 'reqName', accountInfo[0].accountName)
    }