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>


结果是


相关文章
|
16天前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
62 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
8天前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
17 4
|
12天前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
419 2
|
14天前
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
63 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
7天前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
125 0
|
9天前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
12天前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
29 0
|
17天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
27 0
|
17天前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
28 0
|
27天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。