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];
};

运行效果

相关推荐
EndingCoder几秒前
类的继承和多态
linux·运维·前端·javascript·ubuntu·typescript
用户47949283569152 分钟前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
Younglina29 分钟前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
木头程序员30 分钟前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
哈__39 分钟前
React Native 鸿蒙跨平台开发:PixelRatio 实现鸿蒙端图片的高清显示
javascript·react native·react.js
wszy18091 小时前
外部链接跳转:从 App 打开浏览器的正确姿势
java·javascript·react native·react.js·harmonyos
pas1361 小时前
31-mini-vue 更新element的children
前端·javascript·vue.js
码界奇点2 小时前
基于Vue3与TypeScript的后台管理系统设计与实现
前端·javascript·typescript·vue·毕业设计·源代码管理
计算机程序设计小李同学2 小时前
婚纱摄影集成管理系统小程序
java·vue.js·spring boot·后端·微信小程序·小程序
ashcn20012 小时前
水滴按钮解析
前端·javascript·css