程序员经验分享-hwhale

vue =＞ element 进度条 自定义文字 三层数据渲染页面报错：Invalid prop: custom validator check failed for prop “percentage

2023-05-16

三层数据渲染页面报错

    • 报错
    • 原因分析：
    • 解决方案：

在这里插入图片描述

 <!-- <el-table-column prop="address" label="吃饭了吗" width="300">
          <template slot-scope="{row}">
            <el-progress v-if="!isNaN(parseInt((row.planNum/row.completeNum)*100))" :text-inside="true" :stroke-width="15" :format="setItemText(row)" :percentage="setItemProgress(row)" :status="setItemStatus(row)">
              已吃
            </el-progress>
          </template>
        </el-table-column> -->

 // 设置进度
     setItemProgress(row) {
       if (row.planNum > row.completeNum) {
       return 100
      	} else {
        return parseInt((row.planNum / row.completeNum).toFixed(1) * 100)
      }
    },
    // 自定义进度条文字
    setItemText(row) {
     return () => {
        return '进度：' + row.xxx
     	}
     },
    // 设置当前进度条状态，显示不同颜色
    setItemStatus(row) {
      if (row.planNum > row.completeNum) {
         return 'exception'
      } else if (row.planNum === row.completeNum) {
         return 'success'
       } else {
         return 'warning'
      }
    }

报错

在这里插入图片描述

原因分析：

这是你用三级套用的数据时，渲染可能会有undefined的时候，就是拿不到你的数据（我下面数据渲染是再次赋过值的，this.hmwStudyTop = data.course; 此时他已经相当于一个二级数据了）

解决方案：

这个时候就需要用v-if判断一下(ps:v-show不行哦！！)，你要的数据是否存在即可

v-if="!isNaN(form.in.in_percent* 100)"
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

element

Invalid

prop

Custom

vue =＞ element 进度条 自定义文字 三层数据渲染页面报错：Invalid prop: custom validator check failed for prop “percentage 的相关文章

  • http请求返回405 (Method Not Allowed)

    一 问题描述 使用post请求json文件中的数据时 xff0c 返回报错405 Method Not Allowed 二 解决方法 由post请求改为get请求 xff0c 请求静态资源时用get请求 xff1b 原因 xff1a 使用p

  • python一次替换多个字符串

    https blog csdn net liuchengzimozigreat article details 85339372 utm medium 61 distribute pc relevant none task blog Blo

随机推荐

  • JavaScript中获取对象属性的几种方法举例及其说明

    首先我们有这样一个对象 xff1a span class token keyword var span o span class token operator 61 span span class token punctuation spa

  • 【国信长天蓝桥杯】⑤ STM32G431 UART串口收发数据，串口通信示例代码，串口使用步骤，printf重定向

    摘要 本文章基于国信长天M4开发板 xff0c 讲述了STM32G431 串口通信的使用步骤 xff0c 希望对大家有帮助 M4开发板 串口引脚 由上图可以看出 xff0c DAP Link的串口连接在芯片的PA9和PA10引脚 查阅芯片资

  • 基于神经网络的Matlab车牌识别设计

    基于神经网络的Matlab车牌识别设计 1 题目的主要研究内容2 流程介绍3 详细介绍3 1 图像预处理3 2 车牌预处理3 3 字符分割3 4 车牌识别 4 识别结果 1 题目的主要研究内容 使用MATLAB将采集到的图像信息读入 xff

  • 网络编程--01--socket简介--套接字

    socket 套接字 什么是Socket 在计算机通信领域 xff0c socket 被翻译为 套接字 xff0c 它是计算机之间进行通信的一种约定或一种方式 通过 socket 这种约定 xff0c 一台计算机可以接收其他计算机的数据 x

  • 使用strtok函数和split函数来分割字符串

    使用 strtok 函数可以比较方便地实现字符串分割 具体来说 xff0c 可以将 strtok 函数看作一个状态机 xff0c 它会记录当前扫描到的字符串位置 xff0c 并根据指定的分隔符将其分割成多个子字符串 xff0c 并返回分割后

  • vagrant安装docker

    卸载系统之前的docker sudo yum remove docker docker client docker client latest docker common docker latest docker latest logrot

  • 图像识别的未来：机遇与挑战并存

    识别图像对人类来说是件极容易的事情 xff0c 但是对机器而言 xff0c 这也经历了漫长岁月 在计算机视觉领域 xff0c 图像识别这几年的发展突飞猛进 例如 xff0c 在PASCAL VOC物体检测基准测试中 xff0c 检测器的性能

  • 在Ubuntu中通过CV_bridge更改OpenCV版本

    由于最近一个demo使用的OpenCV版本高于Ubuntu1804melodic自带的OpenCV3 2版本 xff0c 需要调节OpenCV的版本 1 安装OpenCV 下载地址 xff1a Releases OpenCV选择自己需要的版

  • LQR控制算法的浅析

    目录 前言 一 知识点补充 1 拉格朗日乘子法 2 积分中值定理 3 向前欧拉法 xff0c 向后欧拉法 xff0c 中点欧拉法 4 向量的导数 5 矩阵求逆引理 记住就好 xff0c 推导见链接 二 连续时间下的LQR推导 1 系统状态方

  • Linux网络编程【UDP】

    文章目录 UDP C S 通信TCP和UDP对C S 通信相关函数recvfrom xff08 accept 43 read xff09 sendto xff08 connect 43 write xff09 bind UDP 服务代码参考

  • C语言结构体对齐

    计算机内存是以字节 xff08 Byte xff09 为单位划分的 xff0c 理论上CPU可以访问任意编号的字节 xff0c 但实际情况并非如此 cpu一次能读取多少内存要看数据总线是多少位 xff0c 如果是16位 xff0c 则一次只

  • 匿名飞控STM32版代码整理之Ano_Imu.c

    一 ANO Imu c文件 COPYRIGHT 2016 ANO Tech 作者 xff1a 匿名科创文件名 xff1a ANO IMU c描述 xff1a 姿态解算函数官网 xff1a www anotc com淘宝 xff1a anot

  • 匿名飞控码STM32版代码整理之Ano_AttCtrl.c

    代码 include Ano AttCtrl h include Ano Imu h include Drv icm20602 h include Ano MagProcess h include Drv spl06 h include A

  • realsense版本号问题

    问题 xff1a librealsense2 so 2 47 cannot open shared object file No such file or directory 打开驱动查看版本号 realsense span class t

  • YOLOv3

    YOLOv3 论文信息论文标题 xff1a 论文作者 xff1a 收录期刊 会议及年份 xff1a 论文学习YOLOv3 网络架构 xff1a YOLO 输出特征图解码 xff08 前向过程 xff09 xff1a 训练策略与损失函数 xf

  • 使用Gazebo进行移动机械臂抓取仿真

    该项目在Gazebo中搭建一款机器人模型 xff0c 其底盘使用turtlebot移动机器人底盘 xff0c 机械臂采用结构较为简单的turtlebot arm xff0c 并在底盘上添加kinect深度相机 最终该机器人可实现自主导航 物

  • 【树莓派——Ubuntu 20.04 系统安装及Windows远程桌面连接显示】

    前言 文章A主要是Raspberry Pi官方系统的安装和用VNC查看器远程连接显示 xff1b 这篇文章主要分享一下Ubuntu 20 04系统的安装以及用Windows 远程桌面连接显示 Ubuntu 20 04系统的下载和烧录 专门的

  • Abstract写作常用句式

    Abstract 摘要以最简洁的文字概括论文 xff0c 点明研究的目的 途径 结果 意义 xff0c 以便读者决定是否要阅读全文 摘要一般包含几项内容 xff1a 1 论文主题 xff08 1句 xff09 2 理论基础 途径 方法 xf

  • mysql备份与恢复：完全备份，增量备份，基于位置点恢复，基于时间点恢复

    理论介绍 数据备份的重要性数据库备份的分类 常见的备份方法MySQL完全备份数据库完全备份分类 数据库备份与恢复MySQL数据库完全备份与恢复mysqldump备份与恢复MySQL数据库增量备份恢复基于位置的恢复基于时间恢复 数据备份的重要

  • vue =＞ element 进度条 自定义文字 三层数据渲染页面报错：Invalid prop: custom validator check failed for prop “percentage

    三层数据渲染页面报错 报错原因分析 xff1a 解决方案 xff1a span class token operator lt span span class token operator span span class token ope

热门标签