记element UI 分页组件 自定义主题遇到的坑

前言

一般的后台管理中，分页用到的地方有很多，索性就抽离出来一个组件，但是，项目领导突发奇想，说根据不同板块展示不同主题色。

实现

<template>
  <div>
    <el-pagination
      ref="pagination"
      v-if="handleSizeChange && handleCurrentChange"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      background
      :pager-count="5"
      :page-size="size"
      layout="total, jumper, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
/**
 * @warning 禁止私自修改代码
 * @description 封装分页操作 支持主题变色
 * @param { Number } page 页码
 * @param { Number } size 一页几条
 * @param { Number } total 总条数
 * @param { Function } handleSizeChange 分页
 * @param { Function } handleCurrentChange 翻页操作
 * @param { String } palte 主题色 用来兼容不同板块的主题 默认绿色
 * @author 小饼干.hualuo
 * */
export default {
  name: "CommonPaging",
  props: {
    page: {
      type: Number,
      default: 1,
    },
    size: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
    handleSizeChange: {
      type: Function,
      default: ()=>function(){},
    },
    handleCurrentChange: {
      type: Function,
      default: ()=>function(){},
    },
    palte:{
      type:String,
      default:"user",
      validator:function(value){
        return ['user','admin'].indexOf(value) !== -1
      }
    }
  },
  computed:{
    // 计算属性计算颜色
    colors:function(){
      let themeColors = ''
      if (this.palte === 'user') {
        themeColors = 'green'
      }else{
        themeColors = 'blue'
      }
      return themeColors
    }
  },
  mounted(){
    this.domOper()
  },
  methods:{
    /** 
      * 操作dom 用来更改分页文案
      * 操作dom 用来通过不同模块更改不同主题色
      * */
    domOper(){
      // 更改UI文案
      const jumper = document.getElementsByClassName("el-pagination__jump")
      jumper[0].childNodes[0].nodeValue = '第'
      // 更改主题
      const pagination = document.getElementsByClassName("el-pager")
      pagination[0].childNodes[this.page - 1].style.backgroundColor = this.colors
    }
  }
};
</script>

<style>
</style>

思路

想过很多种方案

• props更改less
• 动态行内样式
• 百度。。。

虽然都没实现 但是思路有了

由于elementUI中 分页是封装好的 我肯定是不能去改源码的

然后 我毅然决然的去操作了dom

props

先根据props传入的参数

palte:{
      type:String,
      default:"user",
      validator:function(value){
        return ['user','admin'].indexOf(value) !== -1
      }
    }

计算属性

然后 用计算属性判断不同板块展示颜色

computed:{
    // 计算属性计算颜色
    colors:function(){
      let themeColors = ''
      if (this.palte === 'user') {
        themeColors = 'green'
      }else{
        themeColors = 'blue'
      }
      return themeColors
    }
  },

操作dom

最后也是最重要的一步 拿到dom节点 去ast树上去赋值

const pagination = document.getElementsByClassName("el-pager")
pagination[0].childNodes[this.page - 1].style.backgroundColor = this.colors

然后就成功了

使用

//demo.vue
<template>
  <div>
  <!-- CommonPaging全局注册过 -->
    <CommonPaging
      :page="paging.page"
      :size="paging.size"
      :total="paging.total"
      :handle-size-change="handleSizeChange"
      :handle-current-change="handleCurrentChange"
      palte='user'
    ></CommonPaging>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paging: {
        page: 1,
        size: 10,
        total: 10,
      },
    };
  },
  methods:{
    handleSizeChange(val){
      this.paging.size = val
    },
    handleCurrentChange(val){
      this.paging.page = val
    }
  }
};
</script>

<style>
</style>

结果

最后效果 希望能对各位巨佬有所帮助