当前位置: 首页 > news >正文

vue3中,element-plus中el-input的v-model和value的用法示例

el-input的v-model,邦定响应式变量

        <el-col :span="6">
          <el-form-item label="检验类别" prop="verifyType">
            <el-input v-model="applyAllInfo.applyBasicInfo.verifyTypeName" readonly />
          </el-form-item>
        </el-col

el-input的value,邦定函数返回值,实现复杂业务处理

        <el-col :span="6">
          <el-form-item label="评价类型">
            <el-input :value="getTypeValue(applyAllInfo.applyBasicInfo.wspjType)" readonly />
          </el-form-item>
        </el-col>
// 获取类型值
const getTypeValue = (key: number) => {
  // 建立类型与值之间的映射关系
  const keyValueMap: Record<number, string> = {
    0: "不评价",
    1: "卫生评价",
    2: "检验结论",
    3: "卫生评价+检验结论"
  };
  return keyValueMap[key];
};

运行效果

相关文章:

  • 数据结构:哈希表 | C++中的set与map
  • muduo库源码分析: TcpConnection
  • 你的 Linux 服务器连不上网?10 分钟入门网络故障排查
  • 用户态视角理解内核ROP利用:快速从shell到root的进阶
  • 对称加密与非对称加密的特点
  • 深度解析python生成器和关键字yield
  • Java EE期末总结(第五章)
  • STM32 HAL DHT11驱动程序
  • LeetCode --- 444 周赛
  • 【C++初学】课后作业汇总复习(一)概述、输入输出、类的入门——理解封装
  • KTransformers安装笔记 利用docker安装KTransformers
  • 系统分析师(六)-- 计算机网络
  • 留守儿童|基于SprinBoot+vue的留守儿童爱心网站(源码+数据库+文档)
  • 我又叕叕叕更新了~纯手工编写C++画图,有注释~
  • 【实证分析】数智化转型对制造企业全要素生产率的影响及机制探究(1999-2023年)
  • spring security oauth2.0 使用GitHub
  • KiActivateWaiterQueue函数和Queue->Header.WaitListHead队列等待列表的关系
  • 【第三章】13-常用模块1-ngx_http_upstream_module
  • Introduction To Raymarching
  • AI结合VBA提升EXCEL办公效率尝试
  • 网站系统建站/怎么注册网站
  • 网站外链分析/互联网全媒体广告代理
  • 淄博 网站建设/互联网广告代理商
  • 南通seo网站优化软件/湖北百度推广电话
  • 沈阳商城网站建设/怎么设置自己的网站
  • 北京市建设网站首页/新平台怎么推广