H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

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

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

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

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

1.通过vue-cli搭建项目
vue create demo-dg-table

搭建完毕后 这里推荐使用 vscode 打开工程目录,截图如下:
基于ElementUI封装的表头带多种筛选器的表格组件
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的依赖
基于ElementUI封装的表头带多种筛选器的表格组件
我们可以在node_modules中找到dg-table包
基于ElementUI封装的表头带多种筛选器的表格组件
包目录比较简单也没经过压缩,大家可以阅读源码提意见,毕竟我刚入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)
}
}

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

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

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
}
}
}

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

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
})
}
}

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

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

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

4.部分截图

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

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

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

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

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

基于ElementUI封装的表头带多种筛选器的表格组件
基于ElementUI封装的表头带多种筛选器的表格组件
gitee demo点击这里

本文地址:H5W3 » 基于ElementUI封装的表头带多种筛选器的表格组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址