vue作用域插槽实践

Posted 2021-03-15 a438842265

引言 

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

后端传过来的数据函数

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": "u7533u8bf7",
    "task_status": "u672au5b8cu6210",
    "task_type": "u666eu901au4efbu52a1"
}]

前端页面

<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>