Elementui渲染问题

前言

本博客记录一些我个人在使用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>

三、属性查看

官方文档所选属性页面最下方

---