我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈)
后端传过来的数据函数
- 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"
- }]
前端页面
style="min-height: 578px;" class='content-wrapper'>
son2 页面
- class="box-card">
- slot="header" class="clearfix">
> 任务详细
- :gutter="7">
- :data="tableData" style="width: 100%" border="1" stripe>
- type="index" label="#">
- prop="username" label="姓名" width="180">
- prop="task_name" label="任务名称">
- prop="task_status" label="任务状态">
- // 第一种方式
- // 第二种方式
- label="任务类型">
- slot-scope="scope">
{{scope.row.task_type}} {{scope.row}} 会出现这一行所有的数据
- 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) => {
- })
- }
- }
- }
来源: http://www.bubuko.com/infodetail-3385329.html