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>
vue作用域插槽实践的更多相关文章
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 细说Vue作用域插槽,匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- vue 开发系列(十) VUE 作用域插槽
使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...
- Vue作用域插槽:用作循环结构的模版
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...
- Vue作用域插槽:基本用法
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...
- vue作用域插槽
简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...
- 新版vue作用域插槽的使用
2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用: 也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...
- Vue 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...
- Vue的作用域插槽
一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- java程序中的经常出现的的异常处理课后总结
一.JDK中常见的异常情况 1.常见异常总结图 2.java中异常分类 Throwable类有两个直接子类: (1)Exception:出现的问题是可以被捕获的 (2)Error:系统错误,通常由JV ...
- JQuery--事件处理
1.在页面加载完毕之后,浏览器会通过JavaScript为DOM元素添加事件.在常规的JavaScript代码中,通常使用window.onload方法,在jQuery中使用$(document).r ...
- go语言的基础类型
1.布尔类型:bool 2.整型:int8,byte,int16,int,uint,uintptr等 3.浮点类型:float32.float64 4.复数类型:complex64,complex12 ...
- luogu P2765 魔术球问题
题目中没有说球的上限是多少,只告诉了柱子,那么我们就应该以柱子为界去增加球,考虑将每两个能组成完全平方数的点连边,就形成了一个DAG(有向无环图),由于是DAG,可以转换为最小覆盖问题,即最多有n条路 ...
- 力扣347——前 K 个高频元素
这道题主要涉及的是对数据结构里哈希表.小顶堆的理解,优化时可以参考一些排序方法. 原题 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2, ...
- jmeter之Xpath提取器
首先创建线程组,添加http请求,具体的设置如图1所示: 图1 然后,再添加后置处理器中的XPath Extractor,具体的参数设置,以及表达式如图2: 图2 可以添加Debug PostProc ...
- redis的基本操作
redis是key-value的数据结构,每条数据都是⼀个键值对 键的类型是字符串 注意:键不能重复 值的类型分为五种: 字符串string 哈希hash 列表list 集合set 有序集合zset ...
- python2.x 脚本 中文乱码 解决方法
在python脚本起始位置添加如下代码 # -*- coding: UTF-8 -*
- HiBench成长笔记——(5) HiBench-Spark-SQL-Scan源码分析
run.sh #!/bin/bash # Licensed to the Apache Software Foundation (ASF) under one or more # contributo ...
- DRF项目之自定义分页器
在项目中,我们多需要自定义分页器. 代码实现: class PageNum(PageNumberPagination): '''自定义分页器''' # 每页显示个数 page_size = 10 pa ...