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

运行效果

相关推荐
山河木马32 分钟前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
Appthing2 小时前
在 TanStack Start 中使用 VitePWA 的正确配置
javascript
前端炒粉3 小时前
手写promise
java·前端·javascript
mONESY3 小时前
Node.js fs 文件系统模块 四种读写方案全解析
javascript·后端
Larcher3 小时前
从回调地狱到优雅异步:Node.js 文件操作进化史
javascript·后端·架构
荒诞英雄3 小时前
从 17MB Vendor 大包到按需加载:Vite 多入口 Vue 组件库首屏优化实践
vue.js·vite
jsonbro3 小时前
手把手带你实现发布订阅模式
前端·vue.js·设计模式
熊猫钓鱼>_>3 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
江华森4 小时前
Python 实现高德地图找房(三):地图可视化与高德 JS API
开发语言·javascript·python
谭光志4 小时前
AI 是怎么操作浏览器的——browser use 实现原理
前端·javascript·ai编程