Vue组件页面渲染字段无法格式化

谁借莪１个温暖的怀抱￠ 2022-12-27 01:51 128阅读 0赞

> 错误场景

(下拉选框)`服务状态`字段显示为 数字0或1,执行格式化方法后无法生效.

> 解决

错误写法 `value` , serviceStatus字段目前还是varchar类型.

正确写法 `:value` , serviceStatus字段是int类型, 即可以正常格式化.

<el-col :span="12">
    	 <el-form-item label="服务状态" prop="serviceStatus" :formatter="serviceStatusFormat">
    	    <el-select disabled v-model="editData.serviceStatus" placeholder="请输入服务状态">
    	      <el-option label="关闭" :value="0"/>
    	      <el-option label="正常" :value="1"/>
    	    </el-select>
    	  </el-form-item>
    	</el-col>

// 格式化服务状态
    	serviceStatusFormat(row, column) { 
    	   if (row.serviceStatus === 0) { 
    	     return "关闭";
    	   } else if (row.serviceStatus === 1) { 
    	     return "正常";
    	   } else { 
    	     return '';
    	   }
    	 }

测试,成功!  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxa2VlcA_size_16_color_FFFFFF_t_70]

# 总结 #

数据库中该字段的类型如果为`int`, 实体类中和前端页面都必须为数值类型. 类型要统一.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxa2VlcA_size_16_color_FFFFFF_t_70]: /images/20221120/5e9478fd71c84b368a73a7f19864af41.png

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关关于在vue中动态渲染echart组件，渲染失败的问题

以下chart是在正常页面中（不在蒙层中）：用echart组件时，渲染数据多数情况下会是动态添加，也就是前台获取数据，通过props传递给echart组件。对于vue

淩亂°似流年/ 2023年07月09日 12:24/ 0 赞/ 6 阅读

相关强制React组件重新渲染

The beauty of React components is that they automagically render and update based on a c

左手的ㄟ右手/ 2023年02月21日 14:28/ 0 赞/ 8 阅读

相关 Vue组件页面渲染字段无法格式化

> 错误场景 (下拉选框)`服务状态`字段显示为数字0或1,执行格式化方法后无法生效. > 解决错误写法 `value` , serviceStatu

谁借莪１个温暖的怀抱￠/ 2022年12月27日 01:51/ 0 赞/ 129 阅读

相关 vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度

最近用[element][]来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个[issue][],在furybean解答后才知道，我每个单元格

亦凉/ 2022年07月13日 05:07/ 0 赞/ 168 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 357 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 342 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 374 阅读

相关 webpack解析和打包.vue组件页面

文章目录解析和打包.vue组件页面示例源码运行结果分析解析和打包.vue组件页面 `Vue`中的每个页

青旅半醒/ 2022年04月17日 00:59/ 0 赞/ 292 阅读

相关 vue页面渲染是闪烁{{}}

因为vue需要对页面进行解析，所以在完成之前，会看到\{ \{\}\}之类的代码。解决方法：v-cloak。在声明的对象上加上v-cloak <div id="

叁歲伎倆/ 2021年09月27日 05:52/ 0 赞/ 415 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 636 阅读