vue的slot-scope显示后端传来的数据

简介: vue的slot-scope显示后端传来的数据

先上代码

<el-table>
  <el-table-column label="测试" >
     <template slot-scope="scope" prop="testType">
      //prop可以接收接口的参数,例如这个testType是后端传给你的用来选择状态的参数,就可以这样用
        <span v-if="scope.row.testType==0" >会议进行中</span>
        <span v-if="scope.row.testType==1" >会议准备中</span>
        <span v-if="scope.row.testType==2" >会议结束</span>
     </template>
  </el-table-column>
</el-table>


今天想显示后端的数据,但发现自己不会用slot-scope,后来查来资料发现是这这样用的

这是我的代码


<el-table-column prop="data" label="数据类型" width="180" >
         <template slot-scope="scope">
             <span v-if="scope.row.point==1" >实时数据</span>
             <span v-if="scope.row.point==2" >1小时数据</span>
             <span v-if="scope.row.point==3" >2小时数据</span>
             <span v-if="scope.row.point==4" >4小时数据</span>
             <span v-if="scope.row.point==5" >6小时数据</span>
             <span v-if="scope.row.point==6" >12小时数据</span>
             <span v-if="scope.row.point==7" >24小时数据</span>
            </template>
       </el-table-column>


结果是


相关文章
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
36 1
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
36 1
|
17天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
99 1
|
21天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
27 3
|
23天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
44 2
|
1月前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
33 4
|
1月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
1027 2
|
17天前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
112 0
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
226 0
|
1月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。

热门文章

最新文章