elementUI的table和pagination基础用法

开发中经常会用到表单，下面的表单可以放在代码片段里

<template>
    <div>
        <div class='mod'>
            <el-table :data='list' border tyle='width: 100%'>
                <el-table-column type='index' label='序号' width='50' align='center'></el-table-column>
                <el-table-column prop='channelNo' label='渠道编号' width='280' show-overflow-tooltip></el-table-column>
                <el-table-column prop='channelName' label='渠道名称' width='200' show-overflow-tooltip></el-table-column>
                <el-table-column prop='contactName' label='联系人' width='200' show-overflow-tooltip></el-table-column>
                <el-table-column prop='contactPhone' label='联系电话' width='200' show-overflow-tooltip></el-table-column>
                <el-table-column prop='settlementInterval' label='结算周期' width='200' show-overflow-tooltip></el-table-column>
                <el-table-column prop='' label='操作' width='240' align='center' fixed='right'>
                    <template slot-scope='scope'>
                        <el-button plain size='mini' type='primary' @click='toEdit(scope.row.id)'>编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class='page-nav'>
                <el-pagination background layout='jumper, prev, pager, next, total' :total.sync='totalSize' :page-size='params.size' :current-page.sync='params.page' @current-change='getList()'>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            totalSize: 0,
            params: {
                size: 10,
                page: 1
            }
        }
    },
    created(){
        this.getList()
    },
    methods: {
        getList() {
            // 这里请求接口，返回数据赋值给list和totalSize
        },
        toEdit(id) {
            // 编辑
        }
    },
}
</script>