教你怎么使用 element 分页

直接上代码

上代码

<template>
    <div>
         <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="label_ID"
            label="标签ID"
            width="250">
            </el-table-column>
            <el-table-column
            prop="name"
            label="货物类型"
            width="220">
            </el-table-column>
            <el-table-column
            prop="creater_users"
            label="创建人"
            width="220">
            </el-table-column>
            <el-table-column
            prop="username"
            label="分配用户"
            width="220">
            </el-table-column>
            <el-table-column
            prop="creater_time"
            label="创建时间"
            width="300">
            </el-table-column>
            <el-table-column
            prop="update_time"
            label="更新时间"
            width="220">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
                <el-button type="text" @click="dialogFormVisible_add(scope.row.id)"> 编辑</el-button>
                <el-button type="text" size="small" @click="label_del(scope.row.id)">存档</el-button>
            </template>
            </el-table-column>
        </el-table>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="标签ID" :label-width="formLabelWidth">
            <el-input v-model="form.label_ID" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="货物类型" :label-width="formLabelWidth">
            <el-select v-model="form.goods_id" placeholder="请选择货物类型" >
                <el-option :label="item.name" :value="item.id" v-for="(item,index) in goods_list" :key='index'></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="分配用户" :label-width="formLabelWidth">
            <el-select v-model="form.assigned_users" placeholder="请选择分配的用户" >
                <el-option :label="item.username" :value="item.id" v-for="(item,index) in user_list" :key='index'></el-option>
                
            </el-select>
            </el-form-item>
        </el-form>

        

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="put_label ">确 定</el-button>
        </div>
        </el-dialog>
        

		// 分页 (可以直接复制使用，不需要改动)
        <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
		</el-pagination>



    </div>
</template>


<script>
import { label_get,goods_get,Register_GET,label_put } from '../../api/api.js'
export default {
    data(){
        return{
            // 分页配置
            // 标签列表
            allTableData: [], // (这里时你从后端获取的所有数据列表)
            //分页配置需要的参数
            paginations:{
                        page_index:1, //当前页
                        total:0, //总数
                        page_size:5, //一页显示多少
                        page_sizes:[5,10,15,20], //每页显示多少条
                        layout:'total, sizes, prev, pager, next, jumper'
                    },
            // 分页数据
            tableData:[], // (这里是每页显示的数据，我们只需要把你展示需要的列表指向这分页列表)
            

            // 所属公司
            com_id:'',
            // 嵌套框
            dialogTableVisible: false,
            dialogFormVisible: false,
            // 修改
            form: {
            label_ID: '',
            goods_id: '',
            assigned_users: '',
            label_id:'',
            
            },
            formLabelWidth: '120px',
            //货物列表
            goods_list:[],
            //用户列表
            user_list:[],
            // 标签存档列表
            labeldel_list:[],
            
        }
    },
    created() {
        this.com_id = localStorage.getItem('com_id')
    },

    mounted() {
        // 标签请求
        this.get_label()

        //货物请求
        this.get_goods()

        //获取用户
        this.get_user()
        
    },

    methods: {
        // 存档
        label_del(label_id){
            label_put({label_id:label_id}).then(res=>{
                if(res.code==200){
                    alert(res.message)
                    this.$router.go(0)
                }
            })
        },
        //编辑
        dialogFormVisible_add(uid){
            this.dialogFormVisible = true
            this.form.label_id = uid
        },
        //修改标签
        put_label(){
            this.dialogFormVisible = false
            label_put(this.form).then(res=>{
                
                if(res.code==200){
                    alert(res.message)
                    // 刷新
                    this.$router.go(0)
                }
            })
        },
        //获取用户
        get_user(){
            Register_GET().then(res=>{
                for(let i=0,l=res.data.length;i<l;i++){
                    if(res.data[i].company_id== this.com_id && res.data[i].id_auditing==1 && res.data[i].id_del==0){
                        this.user_list.push(res.data[i])
                    }
                }
           })
        },
        //获取货物
        get_goods(){
            goods_get({com_id:this.com_id}).then(res=>{
                this.goods_list = res.data
            })
        },
        // 获取标签
        get_label(){
            label_get({com_id:this.com_id}).then(res=>{
                // 找出没有删除的
                for(let i=0, l=res.length;i<l;i++){
                    if(res[i].is_del==0){
                        this.allTableData.push(res[i]) //把获取的所有数据指向  allTableData
                    }
                }
                this.setPaginations() //这里需要注意调用分页配置的方法
            })
        },
        handleClick(row) {
        console.log(row);
        },
        
        // 分页配置(直接复制使用，不需要改动)
        setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
		},



}
</script>


<style scoped>
	.list {
		margin: 20px;
	}
	.page {
		float: right;
		margin-top: 20px;
	}
</style>