1、关于element-ui分页

<template>
  <el-pagination @size-change="handleSizeChange" background 
  @current-change="handleCurrentChange" :current-page="currentPage" 
  :page-sizes="pageSizes" :page-size="pageSize" :total="total" :layout="layout">
    <slot>
      <ul class="el-pager">
        <li class="number active">{{currentPage}}</li>
        <li class="number" @click="handlePage(item)" v-for="item in pager">{{item}}</li>
      </ul>
    </slot>
  </el-pagination>
</template>
<script>
export default {
  props: {
    currentPage: {
      type: [String, Number],
      default: 1
    },
    total: {
      type: [String, Number],
      default: 0
    },
    pageSizes: {
      type: Array,
      default:function(){
        return  [10,20,50,100,200,300,400]
      }
    },
    pageSize: {
      type: [String, Number],
      default: 10
    },
    layout: {
      type: String,
      default: 'total,prev,slot,next,sizes'
    }
  },
  data() {
    return {
    }
  },
  computed:{
    pager:function(){
      let pager=this.total/this.pageSize
      pager=Math.ceil(pager)//总页数
      if(pager<this.currentPage){
        return []
      }
      let flag=this.currentPage+4
      if(flag>pager){//大于总页数
        let arr=[]
        let total=pager-this.currentPage
        for(let i=1;i<=total;i++){
          arr.push(this.currentPage+i)
        }
        return arr
      }else if(flag<=pager){
        return [this.currentPage+1,this.currentPage+2,this.currentPage+3,this.currentPage+4]
      }
    }
  },
  methods: {
    handlePage(page){
      this.handleCurrentChange(page)
    },
    handleSizeChange(val) {
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val)
    }
  }
}

</script>
<style lang="scss" scoped>
.page {
  text-align: center;
  color: #409EFF;
}

</style>

2、弹框树组件

<template>
  <div v-if="update">
    <el-popover popper-class="selectTree" placement="bottom-start" transition="fade-in-linear" 
    v-model="visible" min-width="200" trigger="click">
      <el-tree :data="data" :props="defaultProps" empty-text="无数据" 
      :node-key="defaultProps.id" :default-expanded-keys="defaultExpandedKeys" 
      :check-on-click-node="true" ref="tree1" :expand-on-click-node="false" 
      :filter-node-method="filterNode" :highlight-current="true" @node-click="handleNodeClick">
      </el-tree>
      <el-input v-model="filterText" @clear="clear" :placeholder="placeholder" 
      :disabled="disabled" slot="reference" :clearable="clearable" :suffix-icon="icon">
      </el-input>
    </el-popover>
  </div>
</template>
<script>
import { getDepartment } from '@/api/systemManager/userMng'
export default {
  name: 'selectTree',
  props: {
    value: String,
    data: Array,
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    filterable: { //禁选值
      type: String,
      default: undefined,
    },
    defaultProps: {
      type: Object,
      default () {
        return {
          children: 'children',
          label: 'label',
          id: 'id',
        }
      }
    },
    nodeKey: {
      type: String,
      default: 'id',
    }
  },
  data() {
    return {
      defaultExpandedKeys: ['-1'], //默认展开
      filterText: '',
      visible: false,
      icon: 'el-icon-arrow-down',
      update: true,
      // data2: [], //部门
    }
  },
  async created() {
    if (this.filterable) {
      this.setFilter(this.data)
    }
  },
  mounted() {
    this.setFilterText()
  },
  watch: {
    value(val) {
      if (!val) {
        this.filterText = ''
      }else {
        if (!this.$refs.tree1) {
          this.$nextTick(() => {
            this.$refs.tree1.setCurrentKey(val)
            let obj = this.$refs.tree1.getCurrentNode()
            if (!obj) {
              return
            }
            this.filterText = obj[this.defaultProps.label]
            return
          })
        } else {
          this.$refs.tree1.setCurrentKey(val)
          let obj = this.$refs.tree1.getCurrentNode()
          if (!obj) {
            return
          }
          this.filterText = obj[this.defaultProps.label]
        }
      }
    },
    visible(val) {
      if (val === true) {
        this.icon = "el-icon-arrow-up"
      } else {
        this.icon = "el-icon-arrow-down"
      }
    },
    filterable(val) {
      this.update = false
      this.setFilter(this.data)
      this.$nextTick(() => {
        this.update = true
      })
    }
  },
  methods: {
    setFilterText() {
      if (!this.value) {
        return
      } else {
        this.$refs.tree1.setCurrentKey(this.value)
        let obj = this.$refs.tree1.getCurrentNode()
        this.filterText = obj[this.defaultProps.label]
      }
    },
    setFilter(arr) {
      arr.map(item => {
        if (item.id === this.filterable) {
          item.disabled = true
          if (item.children && item.children.length != 0) {
            this.setDisabled(item.children)
          }
        } else {
          item.disabled = false
          if (item.children && item.children.length != 0) {
            this.setFilter(item.children)
          }

        }
      })
    },
    setDisabled(arr) {
      arr.map(item => {
        item.disabled = true
        if (item.children && item.children.length != 0) {
          this.setDisabled(item.children)
        }
      })

    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(obj, node) {
      if (node.data.disabled === true || this.disabled === true) {
        return
      }
      this.$refs.tree1.setCurrentKey(obj[this.defaultProps.id])
      this.$emit('input', obj[this.defaultProps.id])
      this.filterText = obj[this.defaultProps.label]
      this.visible = false
    },
    clear() {
      this.$refs.tree1.setCurrentKey('')
      this.$emit('input', '')
    }
  },
  beforeDestroy() {},
  destroyed() {}
}

</script>
<style lang="scss">
.selectTree {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;

  div[aria-disabled="true"] {
    .el-tree-node__content {
      cursor: not-allowed;
    }
  }
}

</style>