表格是对多条结构类似的数据进行展示，包括排序、筛选、对比或其他自定义操作
在后台管理系统中使用的非常频繁，针对不同的数据同样的展示方式，我们该如何减轻自己的工作量呢？这显得尤为重要
选用element ui作为我们的基石
npm i element-ui -S
element ui提供了<el-table>组件，并且暴露了充足的Attributes、Events、Methods、Slot供我们配置。
那作为使用方（el-table）、和提供方(父组件)我们自身需要做到哪些呢？
| Attributes | |||
|---|---|---|---|
| 参数 | 说明 | 类型 | 默认值 |
| className | 自定义类名 | String | "" |
| columns | 表格字段配置 | Array | () => [] |
| data | 列表数据 | Array | () => [] |
| tabIndex | 是否显示序号 | Boolean | false |
| checkBox | 是否有选择框 | Boolean | false |
| radioCheck | 是否单选radio | Boolean | false |
| handle | 操作栏配置 | Object | () => ({}) |
| pager | 是否分页 | Boolean | false |
| formatData | 格式化data | Object | (v) => v |
| rowKey | 行数据的 Key，用来优化 Table 的渲染 | String | "" |
| draggable | 是否支持拖拽 | Boolean | false |
| limitMaxHeight | 限制表格高度 | Boolean | false |
| pagination | 分页参数 | Object | () => ({}) |
| loading | 加载状态 | Boolean | false |
| Event | ||
|---|---|---|
| 事件名 | 说明 | 参数 |
| handleClick | 操作栏目的派发事件，event是handle对象自定义的操作key，row代表这一行，$index是下标 | event,row,$index |
| changeCur | 当前页发生了改变 | current |
| column | |
|---|---|
| label | 表头标题 |
| value | 展示内容 |
| color | 通过success、warning、danger、theme形式展示 |
| minWidth | 最小宽度 |
| width | 定宽 |
| type | slot-代表当前内容通过插槽完成，popover-鼠标移上去是否展示气泡，image-当前内容是否通过icon图展示，tag-通过标签显示，id2name-需要通过id转name展示，time-把当前时间戳转成日期，boolean-将boolean值转成是否，pipe-当前内容是否需要使用到过滤器 |
| pipe | 过滤器名称，与type:pipe结合使用 |
| pipeArg | 过滤器参数 |
| fixed | 当前列是fixed布局 |
| align | left、center、right，默认是center |
| id2name_code | 字典名，可以后端返回，也可前端配置，与type:id2name结合使用 |
| handle | |
|---|---|
| label | 操作 |
| width | 操作列定宽 |
| fixed | 操作列fixed布局 |
| btns | 定义的操作项,数组 |
| btn | |
|---|---|
| label | 操作文案 |
| type | <el-button>里的type属性 |
| disabled | <el-button>里的disabled属性 |
| event | 操作事件，唯一值，通过handleClick事件捕捉 |
| ifRender | 该函数返回true，false判断该btn是否展示，参数为当前btn |
| slot | 是否插槽，可通过作用域插槽自定义样式 |
现在来构建一个简单的表格看看需要做那些事
config.js
export default {
columns: [
{
label: '作者',
value: 'username',
color: 'danger'
},
{
label: '分类',
value: 'categoryname',
},
{
label: '标题',
value: 'title',
minWidth: 200,
},
{
label: '关键字',
value: 'keyword',
},
{
label: '文章状态',
value: 'article_status',
type: 'id2name',
id2name_code: 'ArticleStatus',
},
{
label: '最后修改时间',
type: 'time',
value: 'last_modify_date',
width: 180,
},
{
label: '发表时间',
type: 'time',
value: 'publish_date',
width: 180,
},
],
handle: {
label: '操作',
width: '150',
fixed: "right",
btns: [{
label: '编辑',
type: 'text',
event: 'edit',
show: true
}, {
label: '删除',
type: 'text',
event: 'remove',
show: true
}]
},
formatData (res) {
return res.map(item => {
item.username = item.user_id[0].username
item.categoryname = item.category_id[0].name
return item
})
}
}
<dy-table
:columns="config.columns"
:data="data"
:handle="config.handle"
:formatData="config.formatData"
:pagination="pagination"
:tabIndex="true"
:pager="true"
:loading="loading"
:draggable="true"
:checkBox="true"
@handleClick="onHandleClick"
@changeCur="onPageChanged"
@select="onCheckout"
></dy-table>
data是我们从后端请求到的数据，其它个性化需求都可通过属性配置。
再看看效果
总结
由此可见，通过配置的形式可以让我们少写很多重复的代码，并且思路更加清晰，在遇到新的需求的时候，也可减少维护的成本。
