将数据库拿到的数据渲染到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>

 

 

注意观察红色代码：

<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-columnprop="id" label="商品ID" width="100px">

      </el-table-column>

      <el-table-columnprop="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>