Element table切换和分页管理

<template>
  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-button type="primary" size="small">新增角色</el-button>
          <!--
         el-table
         data='数据绑定'
         el-table-column
         label='标题'
         prop='对应的字段名'
         自定义列
         el-table-column
         template v-slot='{$index:索引,row:当前数据}'
        -->
          <el-table :data="list">
            <el-table-column label="序号" type="index" />
            <el-table-column label="角色名" />
            <el-table-column label="描述" />
            <el-table-column label="操作">
            <template>
              <div>
                <el-button>分配</el-button>
                <el-button>分配</el-button>
                <el-button>分配</el-button>
              </div>
            </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <!-- el-pagination
            current-page:默认页码
            page-sizes:有容量选项,默认一定要在也容量中存在
            page-size:默认也容量
            layout:total总数.sizes页容量.prev上一页pager页码  next:下一页 jumper跳转到哪一页
            total:总页码
            size-change:页容量改变
            current-change:页码改变
             -->
            <el-pagination
              :current-page="page.page"
              :page-sizes="[1, 2, 3, 10]"
              :page-size="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="公司信息">
          <el-button type="primary" size="small">新增角色</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 100
      }
    }
  },
  methods: {
    handleSizeChange(size) {
      console.log(size, '当前页容量')
    },
    handleCurrentChange(change) {
      console.log(change, '当前第几页')
    }
  }
}
</script>

<style>

</style>