引言

我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈)

后端传过来的数据函数


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>

vue作用域插槽实践的更多相关文章

  1. vue作用域插槽的应用

    问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...

  2. 细说Vue作用域插槽,匹配应用场景。

    最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...

  3. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  4. Vue作用域插槽:用作循环结构的模版

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...

  5. Vue作用域插槽:基本用法

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...

  6. vue作用域插槽

    简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...

  7. 新版vue作用域插槽的使用

    2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用:  也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...

  8. Vue 作用域插槽

    使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...

  9. Vue的作用域插槽

    一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...

随机推荐

  1. 【剑指Offer面试编程题】题目1370:数组中出现次数超过一半的数字--九度OJ

    题目描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2 ...

  2. Ubuntu18.04--双显卡Nvida笔记本安装之各种问题

    (1)安装   出现卡logo或者黑屏 关机重启,按住esc键或shift键不放,进入选择模式,按F6进入选择,nomodeset模式 (2)循环的登陆,或者安装好后重启无法再次进入系统 关机重启,在 ...

  3. 修改DUILIB任务栏中显示的图标和EXE图标

    在资源中添加ICO图标,获取属性名,在主窗口文件中的函数InitWindow或OnCreate中添加如下代码: SetIcon(IDR_MAINFRAME); 修改EXE显示图标,在主窗口中加入如下代 ...

  4. nodejs,webpack安装以及初步运用

    nodejs安装: 1.下载:https://nodejs.org/en/download/ 2.安装node-v6.11.3-x64.msi文件,直接默认安装(next……): 3.验证是否完成安装 ...

  5. rally问题合集

    rally 执行过程中涉及到keystone的用例,需要调用adminurl,在-/rally/lib/python2.7/site-packages/rally/osclients.py(主机文件的 ...

  6. liunx开源打印驱动foo2zjs编译小坑

    在编译foo2zjs时出现 ## Dependencies...# *** *** Error: gs is not installed! *** *** Install ghostscript (g ...

  7. Day3-J-4 Values whose Sum is 0 POJ2785

    The SUM problem can be formulated as follows: given four lists A, B, C, D of integer values, compute ...

  8. 106、Java中String类之使用contains()方法判断子字符串是否存在

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  9. Java核心API需要掌握的程度

    分类: java技术2009-08-29 01:03 213人阅读 评论(0) 收藏 举报 javaapiswingxmlio Java的核心API是非常庞大的,这给开发者来说带来了很大的方便,经常人 ...

  10. navcat工具常用快捷键

     navcat工具常用快捷键 ctrl + n: 打开新查询窗口 ctrl + shit + r: 只运行选中的语句 ctrl + /: 注释 (选中要注释的行,然后用快捷键注释) ctrl + sh ...