首页 > 其他分享 >Element-ui表格根据数值条件显示不同内容

Element-ui表格根据数值条件显示不同内容

时间:2023-04-09 11:12:10浏览次数:29  
标签:status 表格 启用 禁用 Element ui 产品

从后端获取的 status 是数字格式的 0 或 1,没有语义可读性

产品 启用状态
产品一 0
产品二 1
<el-table-column
        prop="status"
        label="启用状态">
</el-table-column>

现在要 status 为 0 时显示 “禁用”;为 1 时显示 “启用”

<el-table-column
        prop="status"
        label="启用状态">
    <template slot-scope="scope">
        <span v-if="scope.row.status === 0">禁用</span>
        <span v-else>启用</span>
    </template>
</el-table-column>
产品 启用状态
产品一 禁用
产品二 启用

标签:status,表格,启用,禁用,Element,ui,产品
From: https://www.cnblogs.com/libayu/p/17300019.html

相关文章

  • 龙龙自己写的 JS表格 生成函数
    functiongetTable(tr,td){varnum=1;document.write('<tableborder="1"width="600px">')//vartr=10;for(vari=1;i<=tr;i++){document.write('<tr>')//vartd=10for(varj=1;j<=td;j++){document.......
  • 开启 HTTP/3 & QUIC 在 Docker Compose+Nginx
    HTTP/3基于UDP的QUIC协议,多路复用安全传输HTTP/1.1和HTTP/2都将TCP用作其传输协议HTTP/3和QUIC具有很多优势:1.第一个请求的响应时间更短。在客户端和服务器之间以较少的往返次数协商连接,第一个请求会更快地到达服务器。2.改进了发生连接数据包丢失时的体验。HTT......
  • 表格化构建系统-加入新的系统功能
    要实现的功能1.图片识别表格化重建2.保存识别记录,可以查看自己的记录3.分析记录并统计总结4.能够将所有的记录形成一个完整的个人总结性表格  部分代码:packageorg.example;//importcom.sun.media.sound.InvalidFormatException;importnet.sourceforge.tess4j.ITes......
  • [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互
    @目录原理交互实现容器控件手势开始手势运行手势结束使用控件拖拽物创建pit集合项目地址原理定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个坑(pit),当拖拽物进入坑时,拖拽物就会被吸附在坑里。可以脑补一下下图:你问我为什么是平底锅和坑,当然了在微软......
  • mac m1安装stable-diffusion-webui
    1.准备安装环境[email protected]下载stable-diffusion-webuigitclonehttps://github.com/AUTOMATIC1111/stable-diffusion-webui.git3.下载huggingface模型https://huggingface.co/runwayml/stable-diffusi......
  • 心电图自动诊断系统附GUI界面
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • 表格、表单标签
    表格标签<!--表格-->html<tableborder="1"cellspacing="0"width="400"align="center"><tralign="center"><th>A</th><th>B</th><th>......
  • Angular + quill实现富文本编辑器
    前言由于需要一个富文本编辑器来编辑一些网页内容,手动编辑后存储到数据库比较麻烦,所以着手实现一个自己的富文本编辑器,来编辑和存储一些html文件.这里使用Angular框架,加Quill库实现.ngx-quill:https://github.com/KillerCodeMonkey/ngx-quillquill官网:https://quil......
  • vue导入处理Excel表格详解
    https://blog.csdn.net/m0_46309087/article/details/125022676 目录1.前言2.vue导入Excel表格2.1使用ElementUI中的upload组件2.2使用input文件上传3.总体代码与效果4.总结1.前言  最近遇到前端导入并处理excel表格的情况,趁此机会刚好研究一下vue导入并处理excel数据;......
  • elementui table 禁用部分多选框
    //禁用多选checkboxT(row){if(row.bomDetailParentId==0){returntrue;//禁用}else{returnfalse;//不禁用}},<el-table-columntype="selection"width="55"......