前端渲染数据

news2024/11/25 22:38:44

在前端对接受后端数据处理后返回的接收值的时候,为了解决数据过于庞大,而对数据进行简化处理例如性别,经常会使用1, 0这俩个来代替文字的男,女。以下就是前端渲染的具体实现。

以下是部分代码 
<el-table-column
        prop="gender"
        header-align="center"
        align="center"
        label="性别"
      >
      </el-table-column>

进行如下处理代码

<el-table-column
        prop="gender"
        header-align="center"
        align="center"
        label="性别">
        <template slot-scope="scope">
          <span style="margin-right: 10px">
          {{scope.row.gender == "1" ? "男" : "女"}}</span>
        </template>
      </el-table-column>

 

 其原理是<template> 标签定义在页面加载时隐藏的一些内容,该标签中的内容可以稍后使用 JavaScript 呈现。slot是插槽.

,此外这里每行还有编辑,删除等功能,事件处理函数中的参数,scope.$index就是该行的下标,scope.row就是该行的数据所有消息对象,有了这两个参数我们就可以实现编辑(分配,转派,完工),删除功能,所以这个 slot-scope="scope"是非常重要的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/848170.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

维深(Wellsenn):2023中国消费端VR内容开发商调研报告(附下载

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 国内互联网大厂商入局VR&#xff0c;字节跳动、网易表态明确。字节跳动2021年收购国内头部VR硬件厂商PICO后&#xff0c;加速构建VR内容生态&#xff0c;2021年 成立海南创见未来当前已推出VR视频应用…

fabric.js里toDataURL后,画布内容展示不全?

复现场景&#xff1a; 用fabric生成画布后&#xff0c;转成图片&#xff0c;然后直接在浏览器里打开&#xff0c;画布展示内容缺失 画布原图&#xff1a; toDataURL后链接在浏览器打开&#xff1a; 原因解析&#xff1a; base64链接太长&#xff0c;输入浏览器链接被截断&…

HOT79-跳跃游戏 II

leetcode原题链接&#xff1a;跳跃游戏 II 题目描述 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j &…

VUE+view table.exportCsv()导出.csv文档时如何防止数据格式为科学计数

当使用table.exportCsv()方法导出数据时&#xff0c;出现科学计数法问题&#xff0c;像电话号码&#xff0c;身份证号码等&#xff0c;当数据大于15位后面的会用0替代。 针对这一问题&#xff0c;解决方法如下&#xff1a;就是再数字前加上制表符“\t”注意双引号&#xff0c;…

设计模式-简单工厂模式(静态工厂模式)java实现

介绍 简单工厂模式根据所提供的参数数据返回几个可能类中的一个类的实例。通常返回的类都有一个公共的父类和公共的方法。 意图 提供一个类&#xff0c;负责根据一定的条件创建某一具体类的实例。同时使用工厂模式也是为了隐藏创建对象的过程 角色及其职责 (1)工厂(Creator…

机械工业信息研究院:2023年中国生物制药行业报告(附下载)

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 医药工业宏观情况分析 2021 年生物制药带动医药工业经 济指标大幅增长。根据统计&#xff0c;2021年规 模以上医药工业增加值同比增长 23.1%&#xff0c;增速较上年同期提升 17.2个百分点&#xff0…

MVSnet点云定量评估指标总结

根据MVSnet论文[1]原文说明&#xff0c;点云评估主要从准确性和完整性两个方面来评估。 针对准确性的评估&#xff0c;采用平均距离指标来度量&#xff0c;具体指标分别为Acc、Comp、overall&#xff0c;准确性指标越低越好&#xff0c;表示R与G之间的距离越小&#xff0c;恢复…

《CodeGeeX2 一个让你编码效率翻倍的扩展,分享几个使用小技巧》学习笔记

《CodeGeeX2 一个让你编码效率翻倍的扩展&#xff0c;分享几个使用小技巧》学习笔记 【Only Key Control】使用按键触发提示 使用注释来提升CodeGeeX生成代码的准确性 在函数的顶部添加对函数的说明然后输入function的关键字再使用【Alt /】来触发自动补全 使用CodeGeeX解释…

构建Docker容器监控系统(Cadvisor +Prometheus+Grafana)

Cadvisor PrometheusGrafana 1.1、Cadvisor产品简介 Cadvisor是Google开源的一款用于展示和分析容器运行状态的可视化工具。通过在主机上运行Cadvisor用户可以轻松的获取到当前主机上容器的运行统计信息&#xff0c;并以图表的形式向用户展示。 1.2、安装docker-ce [rootloc…

LeetCode 热题 100 JavaScript--98. 验证二叉搜索树

给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 *** Definition for …

根据渲染数据长度动态渲染后缀图标

在动态获取数据时&#xff0c;想要渲染后面的图标是根据数据的长度渲染图标位置&#xff0c;效果如下&#xff1a; 代码如下&#xff1a; <el-row :gutter"60"><el-col :span"24"><el-form-item><el-input v-model.trim"form…

zuul实现黑名单,request多次读取问题,stream close

一&#xff0c;背景及设计 1.需要在网关实现黑名单功能&#xff0c;实现拦截指定接口。黑名单用户&#xff0c;会加入指定黑名单列表&#xff0c;关联对应功能&#xff0c;如用户登录&#xff0c;用户下单&#xff0c;用户接单。 2.表设计 平台表&#xff1a;不同系统 黑名单…

TimedCache 类的作用和使用

TimedCache 类的作用是实现一个带有过期时间的缓存。它允许存储键值对&#xff0c;并在一定时间后自动删除过期的键值对。使用 TimedCache 可以提高程序的性能&#xff0c;减少对数据库或其他资源的访问次数。 使用 TimedCache 类时&#xff0c;可以按照以下步骤进行操作&…

干货!esp8266+ds3231低功耗解决方案,在特定时间唤醒

最近首次接触esp8266&#xff0c;也是第一次接触硬件&#xff0c;在一个墨水屏日历项目上遇到了低功耗问题&#xff0c;特此记录。 此墨水屏日历不需要一直处于启动状态&#xff0c;我希望它每几小时或者每天启动一次即可。 解决方案 1&#xff1a;仅使用内部 RTC 通过将GPIO…

Android监听设备亮灭屏广播(动态广播代码)

MainActivity中 public class MainActivity extends Activity {private WakeAndLockReceiver wakeAndLockReceiver;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//注册亮屏和息…

强化学习研究 PG

由于一些原因&#xff0c; 需要学习一下强化学习。用这篇博客来学习吧&#xff0c; 用的资料是李宏毅老师的强化学习课程。 深度强化学习(DRL)-李宏毅1-8课&#xff08;全&#xff09;_哔哩哔哩_bilibili 这篇文章的目的是看懂公式&#xff0c; 毕竟这是我的弱中弱。 强化…

想要实现高效数据复制?Paxos并不总是最佳选择!

数据复制典型的算法就是Paxo和Raft。 1 分片元数据的存储 分布式存储系统中&#xff0c;收到客户端请求后&#xff0c;承担路由功能的节点&#xff1a; 先访问分片元数据&#xff08;简称元数据&#xff09;&#xff0c;确定分片对应节点然后才访问真正数据 元数据&#xf…

PoseiSwap 开启“Poseidon”池,治理体系或将全面开启

PoseiSwap曾在前不久分别以IDO、IEO的方式推出了POSE通证&#xff0c;但PoseiSwap DEX中并未向除Zepoch节点外的角色开放POSE资产的交易。而在前不久&#xff0c;PoseiSwap推出了全新的“Poseidon”池&#xff0c;该池将向所有用户开放&#xff0c;并允许用户自由的进行质押、交…

Python机器学习实战-建立随机森林模型预测肾脏疾病(附源码和实现效果)

实现功能 建立随机森林模型预测肾脏疾病 实现代码 import pandas as pd import warnings warnings.filterwarnings("ignore") pd.set_option(display.max_columns, 26)#读取数据 df pd.read_csv("E:\数据杂坛\datasets\kidney_disease.csv") dfpd.Data…

计算机组成原理-笔记-第二章

二、第二章——数据的表示和运算 1、进位制度&#xff08;二进制、十进制&#xff09; 2、BCD码&#xff08;余三码、2421码&#xff09; 编码方式 功能 好处 弊处 BCD码 将每个十进制数码转换为4位二进制码 精度高&#xff0c;适合直接用于数码管或LED等显示设备 编码…