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>
复制代码

 

posted @   流年中渲染了微笑  阅读(275)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
CONTENTS