多下拉框（el-select）和输入框(el-input)绑定

最新推荐文章于 2025-03-05 16:49:40 发布

geekmice

最新推荐文章于 2025-03-05 16:49:40 发布

阅读量2.7k

点赞数 2

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/greek7777/article/details/119850178

版权

本文介绍了一个使用Vue.js实现的动态篮子交易表单，根据选择的篮子类型和交易方向，动态显示不同的输入字段。表单中包含篮子类型选择、交易方向选择以及相应的数量、金额或目标市值等输入项。通过`basketChange`和`selectBsFlagChange`方法处理选择变化，影响输入框的显示。仓库提供了完整的源码供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1、效果图
2、源码实现
3、关键代码说明
4、仓库地址

1、效果图

请添加图片描述

2、源码实现


<template>
  <div>
    <el-form :model="form">
      <el-form-item label="篮子类型:" prop="basketType">
        <el-select
          v-model="form.basketType"
          placeholder="请选择篮子类型"
          @change="basketChange"
        >
          <el-option
            v-for="item in this.form.basketTypeDict"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="交易方向" prop="selectBsFlag">
        <el-select
          v-model="form.selectBsFlag&#