当前位置: 首页 > news >正文

前端渲染数据

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

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

进行如下处理代码

<el-table-columnprop="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.lryc.cn/news/115355.html

相关文章:

  • 【Linux操作系统】深入了解系统编程gdb调试工具
  • linux 安装go 1.18版本
  • LLVM笔记2 Intermediate Representation (IR)
  • 篇五:原型模式:复制对象的秘密
  • 为什么ip地址一直在变化
  • 10.物联网操作系统之低功耗管理
  • SQL SERVER 2019 数据库还原测试库的方法
  • leetcode 62. 不同路径
  • ad+硬件每日学习十个知识点(25)23.8.5(常见芯片类型、数字隔离芯片、IO扩展芯片TCAL6416)
  • fetch-github-hosts间隔一年大更新v2.6发布,多端支持
  • K最近邻算法:简单高效的分类和回归方法(三)
  • 【数据分析专栏之Python篇】五、pandas数据结构之Series
  • 中间件多版本冲突的4种解决方案和我们的选择
  • 对 async/await 的理解
  • Vue 整合 Element UI 、路由嵌套、参数传递、重定向、404和路由钩子(五)
  • 修改 Ubuntu 系统的时区
  • 如何离线安装ModHeader - Modify HTTP headers Chrome插件?
  • 在Linux中安装MySQL
  • python --windows获取启动文件夹路径/获取当前用户名/添加自启动文件
  • 微信云托管(本地调试)⑥:nginx、vue刷新404问题
  • 数据结构 二叉树(一篇基本掌握)
  • ​可视化绘图技巧100篇高级篇(四)-南丁格尔玫瑰图(二)
  • Stable Diffusion - Candy Land (糖果世界) LoRA 提示词配置与效果展示
  • ES6学习-module语法
  • Flutter 实现按位置大小比例布局的控件
  • ES6 - 对象新增的一些常用方法
  • 半导体存储电路
  • web前端之CSS操作
  • Python SQLAlchemy ( ORM )
  • 鉴源实验室丨汽车网络安全运营