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

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

html 复制代码
        <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,邦定函数返回值,实现复杂业务处理

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

运行效果

相关推荐
汝生淮南吾在北3 小时前
SpringBoot+Vue饭店点餐管理系统
java·vue.js·spring boot·毕业设计·毕设
酒尘&6 小时前
JS数组不止Array!索引集合类全面解析
开发语言·前端·javascript·学习·js
用户47949283569157 小时前
"讲讲原型链" —— 面试官最爱问的 JavaScript 基础
前端·javascript·面试
用户47949283569157 小时前
2025 年 TC39 都在忙什么?Import Bytes、Iterator Chunking 来了
前端·javascript·面试
JIngJaneIL8 小时前
基于Java非遗传承文化管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
+VX:Fegn08958 小时前
计算机毕业设计|基于springboot + vue心理健康管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
大怪v8 小时前
【Virtual World 04】我们的目标,无限宇宙!!
前端·javascript·代码规范
蓝瑟11 小时前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
老华带你飞11 小时前
旅游|基于Java旅游信息系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·旅游
韭菜炒大葱12 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc