将数据库拿到的数据渲染到elementUI 中的table中去

其实关键只有两点，一是你能够通过接口拿到数据库里面的数据，二是把你table里面的prop与数据库里面的字段名相等，就是把你想要那个参数展示哪个数据库里面的子段信息，你就把prop="字段名"

 代码：

<template>
  <div class="goods">
    
    <div class="header">
      <el-input  v-model="input" placeholder="请输入内容">el-input>
      <el-button type="primary">查询el-button>
      <el-button type="primary">添加el-button>
    div>
    
    <div class="wrapper">
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column type="selection" width="55">
    el-table-column>
      <el-table-column prop="id" label="商品ID" width="100px">
      el-table-column>
      <el-table-column prop="title" label="商品名称" width="100px">
      el-table-column>
      <el-table-column width="100px" prop="price" label="商品价格">
      el-table-column>
      <el-table-column width="100px"  prop="num"  label="商品数量">
      el-table-column>
      <el-table-column
      width="120px"  prop="category"   label="规格类目">
      el-table-column>
      <el-table-column  prop="image"  label="商品图片">
      el-table-column>
      <el-table-column  prop="sellPoint"  label="商品买点">
      el-table-column>
      <el-table-column prop="descs"  label="商品描述">
      el-table-column>
     
       <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除el-button>
      template>
    el-table-column>
    el-table>
    div>
    
  div>
template>
 
<script>
// import axios from 'axios'
export default {
  name: 'GooDs',
  data() {
    return {
      input: '',
      tableData:[]
     
    }
  },
  components: {},
  methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
    created(){
        console.log(this.$api)
        // axios.get('http://localhost:3001/api/projectList?page=1').then(res => {
        //   console.log(res);
        // })
      this.$api.getGoodsList({
        page:1
      }).then(res=>{
        console.log(res.data)
        if(res.data.status===200){
            this.tableData=res.data.data
        }
      })
    }
}
script>
 
<style lang="less" scoped >
.goods {
  margin: 20px;
}
 
.header {
  height: 60px;
 display: flex;
 
  button {
    height: 40px;
    margin-left: 20px;
  }
 margin: 20px,0;
}
.wrapper{
  display: block;
    margin:20px,0;
  }
style>

 

 

注意观察红色代码：