使用標簽頁和el-table實現數據的渲染

詳細API可參考官網:
https://element.eleme.cn/2.0/#/zh-CN/component/pagination
根據el-table中的 data綁定一個數組,brandlist就是數組名,值為prop的值

 <el-table
        border
        :data="brandlist"
        highlight-current-row
  >
  // 表格的列 el-table-column,
    <el-table-column align="center" label="ID" prop="id" width="80"/>
    <el-table-column align="center" label="編號" prop="brandSn" width="120"/>
    <el-table-column align="center" label="名稱" prop="name" width="180"/>
    <el-table-column align="center" label="圖片" property="picUrl">
        <template slot-scope="scope">
            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="80">
        </template>
    </el-table-column>
    <el-table-column align="center" label="介紹" width="300" prop="desc"/>
    <el-table-column align="center" label="等級" prop="level"/>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

js代碼

通過pagination組件進行綁定,我使用的標簽頁是公用組件,添加一個自定義的事件,事件中用於請求數據

export default {
    name: 'Brand',
    components:{
        Pagination
    },
    data() {
        return {
            brandlist:[],
            total: 0,
            listQuery: {
                page: 1,
                limit: 20,
                id: undefined,
                name: undefined,
                sort: 'add_time',
                order: 'desc'
            }
        }
    },
    mounted() {
        this.getList()        
    },
    methods: {
        getList() {
            listBrand(this.listQuery)
            .then(response => {
                this.brandlist = response.data.data.list
                this.total = response.data.data.total
                })
            .catch(() => {
                this.brandlist = []
                this.total = 0
            })
            console.log(this.brandlist)
        }        
    },
}