dg-table是一个基于ElementUI封装的表格组件
demo也已经上传在Github上了
效果图
可以从 github上面拉下来
通过npm命令就能预览效果
npm install
npm run serve
在事件获取的数据可以在浏览器的控制台中查看。
在demo中你可能会发现筛选条件改变后数据没有更新，这并不是bug而是我没有处理这些数据。
用法分析
main.js
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'
import 'dg-table/lib/css/index.css'
Vue.use(ElementUI)
Vue.use(DGTable)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
因为这个表格组件是基于ElementUI开发的，所以要确保ElementUI的相关组件和样式被引进来。
然后引入dg-table组件和相关的样式。
这样你就能在全局使用dg-table组件了。
App.vue
<dg-table
:configs="configs"
tableId='account'
@filter-change="filterChange"
:data="tableData"
height="600"
@row-click='rowClick'
@selection-change="handleSelectionChange"
stripe
show-summary
highlight-current-row
:default-sort="ds"
></dg-table>
在代码中:configs tableId dg-table特有的属性(点击这里查看说明)
@filter-change是跟el-table公用的，在筛选的时候要做判断是来自 el-table的筛选还是来自dg-table可以通过返回的参数res.type判断 有则来自dg-table
而其余的配置跟el-table一模一样，没错你可以像使用el-table一样使用dg-table，具体的配置可以查看ElementUI table的文档。
configs在demo中的代码分析
configs: [
{
columnConfig: {
type: 'index'
}
},
{
columnConfig: {
type:"expand"
},
component: Expand
},
{
columnConfig: {
type: 'selection'
}
},
{
columnConfig: {
prop: "name",
label: "姓名",
sortable: true
}
},
{
columnConfig: {
prop: "gender",
label: "性别",
filters: [
{text: '男', value: '1'},
{text: '女', value: '2'}
],
filterMethod: (value, row, column) => {
const property = column['property'];
return row[property] === value;
}
},
component: Gender,
},
{
columnConfig: {
prop: "birthPlace",
label: "出生地"
},
component: Address,
filterConfig: {
type: 'cascader',
component: MyCascader
}
},
{
columnConfig: {
prop: "birthDay",
label: "出生日期"
},
filterConfig: {
type: 'date',
component: MyDatePicker
}
},
{
columnConfig: {
prop: "phone",
label: "手机号"
},
filterConfig: {
type: 'custom',
component: MyInput
}
},
{
columnConfig: {
prop: "age",
label: "年龄"
}
},
{
columnConfig: {
prop: "createAt",
label: "创建时间"
},
filterConfig: {
type: 'date'
}
},
{
columnConfig: {
label: '操作',
fixed: 'right'
},
component: Buttons
}
]
这是一个数组，数组中有几个数据就代表你表格有几个列，而每个数据就代表了你这个列的配置。
- columnConfig：
对应的是<el-table-column></el-table-column>组件的配置，具体查看ElementUI table中的Table-column Attributes，就demo中的典型配置我在这边把columnConfig转成<el-table-column></el-table-column>
columnConfig: {
type: 'index'
}
// 等同与下面的代码
<el-table-column type="index">
columnConfig: {
prop: "name",
label: "姓名",
sortable: true
}
// 等同与下面的代码
<el-table-column
prop="name"
label="姓名"
sortable>
columnConfig: {
prop: "gender",
label: "性别",
filters: [
{text: '男', value: '1'},
{text: '女', value: '2'}
],
filterMethod: (value, row, column) => {
const property = column['property'];
return row[property] === value;
}
}
// 等同与下面的代码
<el-table-column
prop="gender"
label="性别"
:filters="[{text: '男', value: '1'}, {text: '女', value: '2'}]"
:filter-method="filterHandler">
其他的属性以此类推，同样适用
- component:
用于自定义列，在自定义组件中可以通过props拿到，row和column
对demo 中的Gender.vue分析
<template>
<div>
<span
v-if="row.gender === '1'"
class="male">
{{gender[row['gender']]}}
</span>
<span
v-if="row.gender === '2'"
class="female">
{{gender[row['gender']]}}
</span>
</div>
</template>
export default {
props:['row', 'column'],
data() {
return {
gender: Object.freeze({
1: '男',
2: '女'
})
}
}
}
通过拿到row判断当前列的gender值来转成男或女
编写自定义列时只要把重点放在怎么表现列上面即可。
- filterConfig
这是dg-table区别与el-table的地方了，自定义筛选器的配置。
默认提供两种类型的筛选器：
date日期
cascader级联
默认的选择器样式之类的是写死的，如果要单独配置这两种选择器等下会介绍如何配置。也是属于自定义筛选器的一种，但是又有点区别。
除了提供的默认的筛选器外还有一种custom自定义筛选器。
先来分析 默认的 date筛选器的使用
filterConfig: {
type: 'date'
}
看起来是不是很简单呢
默认的cascader 级联筛选器
filterConfig: {
type: 'cascader',
props: {
data: cities(), // 这是我内部自己定义的获取省份的函数
myprops: {
value: 'code',
label: 'name',
children: 'children'
}
}
}
这里面data对应的是 el-cascader的options属性，myprops对应的是props属性
接下来介绍自定义这两种筛选器
自定义日期选择器:
filterConfig: {
type: 'date',
component: MyDatePicker
}
虽然这也是自定义筛选器，但是比较特殊，type必须为date，
component就是我们自定义的筛选器
<template>
<div>
<dg-date-picker
:config="config"
type="daterange"
align="left"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
>
</dg-date-picker>
</div>
</template>
export default {
props:['config']
}
这里可以看到自定义日期选择器的时候 不是用el-date-picker而是用我这边包装过的日期选择器，在用法上除了要传一个props接收到的config之外其他和el-date-picker一模一样。要注意的是 其中change事件已经在dg-date-picker中实现了，用户监听change事件没什么太大意义，但是也可以监听，会合并成一个函数处理。
怎么引入dg-date-picker组件呢，在demo中main.js中定义了全局使用
// .....
import {
DgDatePicker } from 'dg-table/lib/packages'
// .....
Vue.component(DgDatePicker.name, DgDatePicker)
这样你就能在各个地方使用了，如果要局部引入也是可以。
自定义级联选择器：
filterConfig: {
type: 'cascader',
component: MyCascader
}
type必须为cascader，
<template>
<div>
<dg-cascader
:options='options'
:config='config'
:props='myprops'
></dg-cascader>
</div>
</template>
import {
cities
} from '../assets/js/simulationapi.js'
export default {
props: ['config'],
data() {
return {
options: cities(),
myprops: {
value: 'code',
label: 'name',
children: 'children',
expandTrigger: 'hover'
}
}
}
}
跟日期选择器一样也是结果封装的，用法说明跟dg-date-cascader一样，除了要传一个config外其余跟el-cascader一样。
引入dg-cascader
// .....
import {
DgCascader } from 'dg-table/lib/packages'
// .....
Vue.component(DgCascader.name, DgCascader)
还有type为custom的筛选器
filterConfig: {
type: 'custom',
component: MyInput
}
MyInput.vue
<template>
<div style="padding: 10px;width:200px">
<el-input placeholder="请输入内容" v-model="val" class="input-with-select">
<el-button
slot="append"
icon="el-icon-search"
@click="confirm">
</el-button>
</el-input>
</div>
</template>
export default {
props: ['config'],
data() {
return {
val: ''
}
},
methods: {
confirm () {
this.$emit('__CUSTOM_FILTER_DATA__', {
value: this.val
})
}
}
}
代码中在确认要筛选的处理函数上要通过
this.$emit('__CUSTOM_FILTER_DATA__', {
value: this.val
})
来通知表格组件 你筛选来 某个条件，其中value就是在表格组件的filter-change事件中的回调函数接收参数res中的value，如果需要的话可以定义label如果没定义就拿不到值。
demo中代码的分析就到这里来。使用起来还是比较简单。
