vue作用域插槽实践
引言 #
我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈)
后端传过来的数据函数#
from django.http import JsonResponse
def record_detailed(request): all_record = models.Record.objects.all() lis = [] for obj in all_record: lis.append({ 'username': obj.username, 'task_name': obj.task_name, # 我想要serializers 但是发现效果不好
'task_status': obj.get_task_status_display(),
'task_type': obj.get_task_type_display(), })
return HttpResponse(json.dumps(lis))
数据#
[{
"username": "xiao",
"task_name": "\u7533\u8bf7",
"task_status": "\u672a\u5b8c\u6210",
"task_type": "\u666e\u901a\u4efb\u52a1"
}]
前端页面#
<template> <div style="min-height: 578px;" class='content-wrapper'> <div> <h3>son2页面</h3> </div> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>任务详细</span> </div> <el-row :gutter="7"> <el-col> <el-table :data="tableData" style="width: 100%" border="1" stripe> <el-table-column type="index" label="#"></el-table-column> <el-table-column prop="username" label="姓名" width="180"></el-table-column> <el-table-column prop="task_name" label="任务名称"></el-table-column> <el-table-column prop="task_status" label="任务状态"></el-table-column> // 第一种方式 <!-- <el-table-column prop="task_type" label="任务类型"></el-table-column> --> // 第二种方式 <el-table-column label="任务类型"> <template slot-scope="scope"> {{scope.row.task_type}} {{scope.row}} 会出现这一行所有的数据 </template> </el-table-column> </el-table> </el-col> </el-row> </el-card> </div> </template> <script> export default { data() { return { tableData: [] } }, created() { this.getTableData() }, methods: { getTableData() { this.$axios.get('http://127.0.0.1:8000/record_detailed/') .then((response) => { this.tableData = response.data }).catch((error) => { }) } } } </script> <style> </style>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现