Render the data obtained from the database to the table in elementui

In fact, there are only two key points , First, you can get the data in the database through the interface , Second, put you table Inside prop Equal to the field name in the database , It is to show the sub segment information in which database you want the parameter , You put prop=" Field name "

  Code ：

<template>
  <div class="goods">
    <!--  Search area  -->
    <div class="header">
      <el-input  v-model="input" placeholder=" Please enter the content "></el-input>
      <el-button type="primary"> Inquire about </el-button>
      <el-button type="primary"> add to </el-button>
    </div>
    <!--  Table area display view  -->
    <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=" goods ID" width="100px">
      </el-table-column>
      <el-table-column prop="title" label=" Name of commodity " width="100px">
      </el-table-column>
      <el-table-column width="100px" prop="price" label=" commodity price ">
      </el-table-column>
      <el-table-column width="100px"  prop="num"  label=" The number ">
      </el-table-column>
      <el-table-column
      width="120px"  prop="category"   label=" Specification category ">
      </el-table-column>
      <el-table-column  prop="image"  label=" Commodity images ">
      </el-table-column>
      <el-table-column  prop="sellPoint"  label=" Buy goods ">
      </el-table-column>
      <el-table-column prop="descs"  label=" Commodity Description ">
      </el-table-column>
     
       <el-table-column label=" operation ">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"> edit </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"> Delete </el-button>
      </template>
    </el-table-column>
    </el-table>
    </div>
    <!--  Pagination  -->
  </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>

 

 

Pay attention to the red code ：

<template>

  <div class="goods">

    <!-- Search area -->

    <div class="header">

      <el-input  v-model="input" placeholder=" Please enter the content "></el-input>

      <el-button type="primary"> Inquire about </el-button>

      <el-button type="primary"> add to </el-button>

    </div>

    <!-- Table area display view -->

    <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=" goods ID" width="100px">

      </el-table-column>

      <el-table-columnprop="title" label=" Name of commodity " width="100px">

      </el-table-column>

      <el-table-column width="100px" prop="price" label=" commodity price ">

      </el-table-column>

      <el-table-column width="100px"  prop="num"  label=" The number ">

      </el-table-column>

      <el-table-column

      width="120px"  prop="category"   label=" Specification category ">

      </el-table-column>

      <el-table-column  prop="image"  label=" Commodity images ">

      </el-table-column>

      <el-table-column  prop="sellPoint"  label=" Buy goods ">

      </el-table-column>

      <el-table-column prop="descs"  label=" Commodity Description ">

      </el-table-column>

     

       <el-table-column label=" operation ">

      <template slot-scope="scope">

        <el-button

          size="mini"

          @click="handleEdit(scope.$index, scope.row)"> edit </el-button>

        <el-button

          size="mini"

          type="danger"

          @click="handleDelete(scope.$index, scope.row)"> Delete </el-button>

      </template>

    </el-table-column>

    </el-table>

    </div>

    <!-- Pagination -->

  </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>