CareUI

# 分页

# 基础分页

共 0 项数据
请选择
  • 1
共 36 项数据
请选择
  • 1
  • 2
  • 3
  • 4
共 100 项数据
请选择
  • 1
  • 10
  • 11
  • 12
  • 13
  • 14
  • 20
共 100 项数据
请选择
  • 1
  • 10
  • 11
  • 12
  • 13
  • 14
  • 20
跳至
页
共 36 项数据
请选择
  • 1
  • 2
  • 3
  • 4
<template>
    <div class="demo-block-column">
        <div class="demo-block-row">
            <t-pagination
                @current-change="onCurrentChange"
                @page-size-change="onPageSizeChange"
                @change="onChange"
            />
        </div>
        <div class="demo-block-row">
            <t-pagination
                :total="36"
                :default-current="2"
                :default-page-size="10"
                @current-change="onCurrentChange"
                @page-size-change="onPageSizeChange"
                @change="onChange"
            />
        </div>
        <div class="demo-block-row">
            <t-pagination
                v-model="current"
                :total="100"
                :page-size.sync="pageSize"
            />
        </div>
        <div class="demo-block-row">
            <t-pagination
                v-model="current"
                :total="100"
                :page-size.sync="pageSize"
                show-jumper
            />
        </div>
        <div class="demo-block-row">
            <t-pagination
                disabled
                :total="36"
                :default-current="2"
                :default-page-size="10"
                @current-change="onCurrentChange"
                @page-size-change="onPageSizeChange"
                @change="onChange"
            />
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      current: 12,
      pageSize: 5,
    };
  },
  methods: {
    onPageSizeChange(size, pageInfo) {
      console.log('Page Size:', this.pageSize, size, pageInfo);
    },
    onCurrentChange(current, pageInfo) {
      console.log('Current Page', this.current, current, pageInfo);
    },
    onChange(pageInfo) {
      console.log('Page Info: ', pageInfo);
    },
  },
};
</script>
显示代码 复制代码

# 带快速跳转的分页

共 100 项数据
请选择
  • 1
  • 10
  • 11
  • 12
  • 13
  • 14
  • 20
跳至
页
共 36 项数据
请选择
  • 1
  • 2
  • 3
  • 4
跳至
页
<template>
    <div class="demo-block-column">
        <div class="demo-block-row">
            <t-pagination
                v-model="current"
                :total="100"
                :page-size.sync="pageSize"
                show-jumper
            />
        </div>
        <div class="demo-block-row">
            <t-pagination
                disabled
                :total="36"
                :default-current="2"
                :default-page-size="10"
                @current-change="onCurrentChange"
                @page-size-change="onPageSizeChange"
                @change="onChange"
                show-jumper
            />
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        current: 12,
        pageSize: 5,
    };
  },
  methods: {
    onPageSizeChange(size, pageInfo) {
      console.log('Page Size:', this.pageSize, size, pageInfo);
    },
    onCurrentChange(current, pageInfo) {
      console.log('Current Page', this.current, current, pageInfo);
    },
    onChange(pageInfo) {
      console.log('Page Info: ', pageInfo);
    },
  },
};
</script>
显示代码 复制代码

# 迷你版分页

共 100 项数据
请选择
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20
共 100 项数据
请选择
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20
<template>
    <div class="demo-block-column">
        <div class="demo-block-row">
            <t-pagination
                size="small"
                :total="100"
                :page-size.sync="pageSize"
            />
        </div>
        <div class="demo-block-row">
            <t-pagination
                disabled
                size="small"
                :total="100"
                :page-size.sync="pageSize"
            />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            current: 12,
            pageSize: 5,
        };
    },
  };
</script>
显示代码 复制代码

# 级简版分页

共 100 项数据
请选择
1/20
<template>
    <div class="demo-block-column">
        <div class="demo-block-row">
            <t-pagination
                theme="simple"
                :total="100"
                :page-size.sync="pageSize"
            />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            current: 12,
            pageSize: 5,
        };
    },
  };
</script>
显示代码 复制代码

← Steps 步骤条 →