Elementui渲染问题

最新推荐文章于 2025-06-03 14:15:20 发布

老百京儿鸡肉卷

最新推荐文章于 2025-06-03 14:15:20 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ZYT1023/article/details/121546971

本文档记录了在使用elemenui框架时遇到的数据渲染问题，特别是将API返回的数据转化为适合el-table和el-descriptions组件显示的格式。问题在于数据需要转化为数组形式，通过在`created`钩子中使用`axios`获取数据并用`push`方法转换数据类型。在el-table中，只需将数据赋值给`data`属性并指定`prop`为需要显示的字段。而在el-descriptions中，使用模板语法`{{}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本博客记录一些我个人在使用elemenui时渲染数据遇到的问题

一、数据需要转化为数组形式

1.官方el-table代码

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

官方el-descriptions代码

<el-descriptions title="用户信息">
    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
    <el-descriptions-item label="备注">
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>

2.在data属性中传入数据出现以下报错

说明需要转换数据类型

3.转换方法

import axios from 'axios';
import { ReqUserInfoByUserId } from "../../request/index.js";
export default {
  data() {
    return {
      selfInfo:[],
         };
  },
  created() {
  
       ReqUserInfoByUserId({ 
         id: '13f897e1fc7849a984de24eba92bf4ff'
        }).then((res)=>{
           
            this.selfInfo.push(res.data)

        }).then((erro)=>{
          console.log(erro)
        })
        
    },
    
  }

在data中定义数组类型 selfInfo，在获取数据中this.selfInfo.push(res.data)进行转换传入

二、具体渲染

1.观察数据

2.渲染数据

el-table在data改为所定义数据名并在prop处写上需要渲染的字段名即可

<el-table
    :data="selfInfo"
    border
    style="width: 100%">
<el-table-column
      prop="role.desc"
      label="学历"
      width="180">
    </el-table-column>
</el-table>

el-descriptions没有data属性,使用{{}}渲染，注意数组类型所选字段所在下标索引

<el-descriptions title="个人信息">
       
      <el-descriptions-item label="学历" >
{{ selfInfo[0].role.desc }}</el-descriptions-item>
      
      
</el-descriptions>