使用标签页和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)
        }        
    },
}