基于ElementUI封装的表头带多种筛选器的表格组件

dg-table是一个基于ElementUI封装的表格组件

demo和文章中图片表格中的数据均有js随机生成的 如有冒犯的地方还请见谅

demo也已经上传到gitee上了
查看demo演示点击这里

1.通过vue-cli搭建项目

vue create demo-dg-table

搭建完毕后 这里推荐使用 vscode 打开工程目录，截图如下：

vue-cli3.0的目录较2.0的简洁很多。vue cli3.0更多内容点击这里

2.依赖包的安装

dg-table是基于ElementUI开发的，目前没有从ElementUI中剥离出使用到的组件，所以使用的时候ElementUI一起npm下来

npm i element-ui dg-table -S

我们将在package.json中看到element-ui和dg-table的依赖

我们可以在node_modules中找到dg-table包

包目录比较简单也没经过压缩，大家可以阅读源码提意见，毕竟我刚入vue的坑不久…也是由于公司项目急需，所以编写过程中一开始没有规划，跟项目有点耦合，这段时间才剥离出来，难免有点乱。

3.代码编写

3.1 在main.js中使用vue.use()全局注册组件

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import DGTable from 'dg-table'
import 'element-ui/lib/theme-chalk/index.css' // elementui 的主题css 可以自定义主题
Vue.use(ElementUI) // 全局注册elementui
Vue.use(DGTable) // 全局注册 dg-table 这样我们就可以 在html中<dg-table></dg-table>使用组件了
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3.2 HelloDGTable.vue 也是这次主要的文件

3.2.1 html部分

<template>
  <div class="hello">
    <dg-table :data='data' :selection="true" :pagination="true" :page-config="{ pagenum:pagenum, curpage: curpage }" :filter-init="[]" :row-click="onclick" :action-config="activeConfig" :column-config="config" @filter-change='getFilter' @select-change="getselect" @page-change="getpage"></dg-table>
  </div>
</template>

上面的代码展示的是全部的属性和事件，可以根据自己的需求配置

3.2.2 javacript部分 重点讲解自定义部分的内容

import cc from './columcomponent.vue'  // 自定义列的组件
import CF from './customizefilter.vue' // 自定义的筛选器
import CM from './customizemenu.vue' // 自定义的操作列
import {
  searchdata,
  dofilter,
  cities,
  createTableDataByRandom
} from '../assets/js/simulationapi.js' // 用于模拟表数据的js
export default {
  methods: {
    getpage (page) { // 翻页变化事件的绑定函数
      this.curpage = page
      let allfilter = {
        filters: this.filters,
        page
      }
      let res = dofilter(allfilter)
      this.data = res.data
    },
    getFilter (val) { // 筛选条件变化事件的绑定函数
      console.log(val)
      let allfilter = {
        filters: val,
        page: 1
      }
      this.filters = val
      let res = dofilter(allfilter)
      this.data = res.data
      this.pagenum = res.pagenum
    },
    getselect (val) { // 多选变化事件的绑定函数
      console.log(val)
    }
  },
  mounted () {
    let res = createTableDataByRandom(587)
    this.data = res.data
    this.pagenum = res.pagenum
  },
  data () {
    return {
      filters: 3,
      select: true,
      pagination: true,
      pagenum: 1,
      curpage: 1,
      onclick: (row) => {
        alert(JSON.stringify(row))
      },
      activeConfig: {
        type: 'customize', // 声明类型为自定义
        label: '获取',
        component: CM, // 引用vue组件
        handlers: { // 在组件中 采用 handlers.firsth(row)使用
          firsth: (row) => {console.log('first', row)},
          second: (row) => {console.log('second', row)}
        },
        width: '100'
      },
      config: [
        {
          prop: 'name',
          label: '姓名',
          width: '80',
          filterConfig: {
            ftn: '姓名',
            type: 'search',
            key: 'uid',
            placeholder: '输入姓名',
            listinfo: {
              handler: searchdata,
              searchkey: 'name', // 用于搜索api对应的key
              showkey: 'name' // 在列表中要显示的字段
            }
          }
        }, {
          prop: 'gender',
          label: '性别',
          component: cc, // 自定义性别处理的组件 在组件中会传入row 当前行
          width: '80',
          filterConfig: {
            ftn: '性别',
            type: 'radio',
            key: 'gender',
            listinfo: {
              labelkey: 'label',
              valuekey: 'value'
            },
            items: [
              { label: '男', value: 1 },
              { label: '女', value: 2 }
            ]
          }
        }, {
          prop: 'birthPlace',
          label: '出生地',
          processdata: (row, prop) => {
            // console.log('process data:', row) // 返回整行 便于 处理一些依赖其他列的数据
            var space = ''
            if (!row.birthPlace) return '-'
            var curobj = row.birthPlace
            while (1) {
              if (curobj) {
                space += curobj.name
                curobj = curobj.child
              } else {
                break
              }
            }
            return space
          }, // 数据的处理 默认提供一些 也可以自定义处理数据的函数
          filterConfig: {
            ftn: '出生地',
            key: 'birthPlace',
            type: 'cascader',
            hidebg: true,
            props: {
              value: 'code',
              label: 'name',
              children: 'children'
            },
            items: cities()
          }
        }, {
          prop: 'birthDay',
          label: '出生日期',
          filterConfig: {
            ftn: '生日',
            hidebg: true,
            type: 'date',
            key: 'birthDay'
          },
          processdata: 'time'
        }, {
          prop: 'phone',
          label: '手机号',
          filterConfig: {
            ftn: '手机',
            type: 'edit',
            key: 'phone'
          }
        }, {
          prop: 'age',
          label: '年龄',
          filterConfig: {
            ftn: '年龄',
            type: 'range',
            key: 'age',
            unit: '岁'
          }
        }, {
          prop: 'age2',
          label: '年龄'
        }, {
          prop: 'age3',
          label: '自定义筛选',
          filterConfig: {
            ftn: '自定义筛选',
            type: 'customize', // 声明为自定义筛选器
            component: CF, // 筛选的组件 返回的数据要按规定格式返回
            key: 'age',
            customizedata: {label: '我是用户自定义的数据', value: 'balabalabala'} // 会传入组件中供组件使用
          }
        }
      ],
      data: []
    }
  }
}

3.3.3 自定义操作列的组件

<template>
  <div>
    <el-button @click.stop="click1" size="mini">click1</el-button>
    <el-button @click.stop="click2" size="mini" style="margin:0;margin-top:5px">click2</el-button>
  </div>
</template>

注意 ：如果有提供行的单击事件在 下面组件的单击事件上加上.stop的修饰符，防止事件传播触发到行的单击事件

props: ['row', 'handlers'],
methods: {
   click1 () {
     this.handlers.firsth(this.row)
   },
   click2 () {
     this.handlers.second(this.row)
   }
 }

3.3.4 自定义列组件

<div>
    <span v-if="row.gender === '1'" class="male">{{gendermap[row.gender]}}</span>
    <span v-if="row.gender === '2'" class="female">{{gendermap[row.gender]}}</span>
  </div>

import { GENDER } from '../assets/js/datamap.js'
export default {
  props: ['row'],
  data () {
    return {
      gendermap: GENDER
    }
  }
}

3.3.5 自定义表头筛选器

<div style="padding:10px">
    <div><span style="font-size:12px">我是一个用户自定义的筛选器</span></div>
    <div class="o"><el-button @click="todoSearch">点击我进行筛选</el-button></div>
  </div>

props: {
    customizedata: Object,
    filterkey: {
      type: String,
      default: ''
    },
    ftn: {
      type: String,
      default: ''
    }
  },
  methods: {
    todoSearch () {
// 按照这种格式emit数据
      this.$emit('getFilterBridge', {
        key: this.filterkey,
        label: this.customizedata.label,
        value: this.customizedata.value,
        ftn: this.ftn
      })
    }
  }

4.部分截图

gitee demo点击这里