<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>
Element table切换和分页管理
最新推荐文章于 2023-05-19 15:05:12 发布