自定义el-pagination

热爱编程的小灰灰

已于 2023-05-05 18:53:33 修改

阅读量390

点赞数

文章标签：前端

于 2023-05-05 18:51:44 首次发布

本文链接：https://blog.csdn.net/gongxinhui89/article/details/130513090

版权

<el-pagination
    style="margin-top: 50px;text-align: center"
    background
    layout="total,prev, prev, pager, next, next"
    :total="100"
    :page-size="4"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
</el-pagination>


export default {
  data() {
    return {
    }
  },
  mounted() {
    this.$nextTick(
      this.getClass()
    )
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
    getClass() {
      let prevStyle = document.getElementsByClassName('btn-prev')[0];
      let prevHtml = prevStyle.getElementsByClassName('el-icon')[0];
      prevHtml.outerHTML = '上一页'
      prevStyle.style.paddingLeft = '10px'
      prevStyle.style.paddingRight = '10px'

      let nextStyle = document.getElementsByClassName('btn-next')[1];
      let nextHtml = nextStyle.getElementsByClassName('el-icon')[0];
      nextHtml.outerHTML = '下一页'
      nextStyle.style.paddingLeft = '10px'
      nextStyle.style.paddingRight = '10px'
    }
  }
}
</script>