element 前端分页及删除某条数据

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[10]"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

export default{
	data(){
	 page: 1, // 分页 页数
	            limit: 10, // 分页 当前条数
	            total: null, //分页 总条数
	            tableList: [], // 分页数据
	            tableData:{itemList:[]},  // 页面总数据
	},
	async created(){
		await this.init()
		
	},
	methods:{
		// 获取总数据
	async init(){
		this.tableData.itemList = await XXXX();
		this.getList()
		},
		// 分页处理数据
        getList() {
            this.tableList = this.tableData.itemList.filter((item, index) => {
                return index < this.page * this.limit && index >= this.limit * (this.page - 1)
            })
            this.total = this.tableData.itemList.length
        },
        // 当每页数量改变
        handleSizeChange(val) {
            console.log(`每页${val}条`);
            this.limit = val
            this.getList()
        },
        // 当当前页改变
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            this.getList()
        },
        // 删除某一行数据后
        deletes(params){
		// 根据 params 里的 某个找到 总数据的那一条
		let index = this.tableData.itemList.findeIndex(item=> item.id ===params.id )
		if(index > -1){
			this.tableData.itemList.splice(index,1)
			}
		}
		 /** 
       * 判断 总条数 是否可以是10的倍数,得到页数  不然会出现bug
      */
     if(this.tableData.itemList.length % 10 === 0){
      this.page = this.tableData.itemList.length / 10 === 0 ? 1 : this.tableData.itemList.length 		/ 10
    }
      this.getList();
	}
}



 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值