--- theme: cyanosis highlight: a11y-dark --- # 前言由于重构后台管理项目中有好多表格页面，举个栗子 ![k-table-demo.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/376a6801eaea499e96dacccc7d14594e~tplv-k3u1fbpfcp-watermark.image) 这表格看着还挺好看，写起来叫人直呼XX，多动脑子少掉发，少走弯路多省鞋。写了一个后感觉太麻烦了，于是我奋笔疾书，利用`Vue+Element Table`重新封装出了一套表格组件 3分钟就可以实现一个表格页面的骚操作，你值得拥有 # 思考看了表格咱们简单的把它们划分了下功能区 - 最先入场的选手是最上方一排整整齐齐有点严肃的搜索功能区 - 其次入场的是略带风骚的表格功能区 - 然后入场的是全能综合性型选手表格内容区域 - 最后入场的是有着长腿带着长队的分页组件区域诶，让我们思考下最复杂的地方在哪里？下面我用个图来标注下咱们接下来需要拿下的高地总的来说表格内容这一块最不可控，他可能有多选、序号、图片、状态、时间、操作列...... ![k-table.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76e7d648ece84c1d913fdf5d43a8808b~tplv-k3u1fbpfcp-watermark.image) # 实践咱们把搜索层写成一个组件`filterPane.vue` 把表格分成一个组件`tablePane.vue` 表格组件`tablePane.vue`包括功能区、表格内容区、分页 # filterPane.vue ## 明确目标搜索层一般包括日期选择器、输入框、select下拉选择器等+搜索功能、重置功能 ## 传入数据结构整理 ```js // 搜索栏组件 filterData:{ timeSelect:true, //是否显示日期控件 elinput:[ { name:'姓名', //提示语 key:'userName', //字段名 width:100 //宽度 } ], elselect:[ { name:'部门', key:'department', width:100 option:[{ key:1, value:'技术部' }] } ] } ``` ### timeSelect - 类型 `Boolean` 是否显示时间选择器 ### elinput - 类型 `Array` 输入框选项，子对象内 **name**为输入框的`placeholder` **key**为字段名 ### elselect - 类型 `Array` select下拉框选项，子对象内 **name**为输入框的`placeholder` **key**为字段名 **option**为select下拉选项 ## 开始封装 ```js ``` # tablePane.vue ## 明确目标实现表格功能行、实现表格基本功能、实现分页功能 ## 传入数据结构整理 ```js dataSource: { tool:[ { name: '新增用户', //按钮名称 key: 1, // 唯一标识符 permission: 2010106, // 权限点 type: '', // 使用element自带按钮类型 bgColor: '#67c23a', // 自定义背景色 handleClick: this.handleAdd //自定义事件 }, ] data: [], // 表格数据 cols: [], // 表格的列数据 isSelection: false, // 表格有多选时设置 selectable: function(val) {//禁用部分行多选 if (val.isVideoStatus === 1) { return false } else { return true } }, handleSelectionChange:(val)=>{} //点击行选中多选返回选中数组 isOperation: true, // 表格有操作列时设置 isIndex: true, // 列表序号 loading: true, // loading pageData: { total: 0, // 总条数 pageSize: 10, // 每页数量 pageNum: 1 // 页码 } operation: { // 表格有操作列时设置 label: '操作', // 列名 width: '350', // 根据实际情况给宽度 data: [ { label: '冻结', // 操作名称 permission:'' //权限点 type: 'info', //按钮类型 handleRow: function(){} // 自定义事件 }, ] } }, ``` ### tool - 类型 *`Array`* - 默认值 **`[ ]`** 配置表格工具列 ```js dataSource: { tool:[ { name: '新增用户', //按钮名称 key: 1, // 唯一标识符 permission: 2010106, // 权限点 type: '', // 使用element自带按钮类型 bgColor: '#67c23a', // 自定义背景色 handleClick: this.handleAdd //自定义事件 }, ] } ``` ### cols - 类型 *`Array`* - 默认值 **`[ ]`** 配置表头 ```js dataSource: { cols:[ { label: '标题', //列名 prop: 'belongUserId', //字段名称 width: 100 //列宽度 }, { label: '副标题(季)', prop: 'subtitle', isCodeTableFormatter: function(val) {//过滤器 if (val.subtitle === 0) { return '无' } else { return val.subtitle } }, width: 100 }, { label: '创建时间', prop: 'createTime', isCodeTableFormatter: function(val) {//时间过滤器 return timeFormat(val.createTime) }, width: 150 } ] } ``` ### pageData - 类型 *`Object`* - 默认值 **`{ }`** 配置分页 ```js dataSource: { pageData: { total: 0, // 总条数 pageSize: 10, // 每页数量 pageNum: 1, // 页码 pageSize:[5,10,15,20]// 每页数量 } } ``` ### operation - 类型 *`Object`* - 默认值 **`{ }`** 配置操作列 ```js dataSource: { operation: { // 表格有操作列时设置 label: '操作', // 列名 width: '350', // 根据实际情况给宽度 data: [ { label: '修改', // 操作名称 permission:'1001' //权限点 type: 'info', //按钮类型icon为图表类型 handleRow: function(){} // 自定义事件 }, { label: '修改', // 操作名称 permission:'1001' //权限点 type: 'icon', //按钮类型icon为图表类型 icon:'el-icon-plus' handleRow: function(){} // 自定义事件 } ] } } ``` ## tablePane.vue配置项Cols详解 - **普通列** ```js cols:[ { label: '标题', prop: 'title', width: 200 } ] ``` - **普通列字体颜色改变** ```js cols:[ { label: '状态', prop: 'status', isTemplate: function(val) { if (val === 1) { return '禁言中' } else { return '已解禁' } }, isTemplateClass: function(val) { if (val === 1) { return 'color-red' } else { return 'color-green' } } } ] ``` - **带filter过滤器列** ```js cols:[ { label: '推送时间', prop: 'pushTime', isCodeTableFormatter: function(val) { return timeFormat(val.pushTime) } }, { label: '状态', prop: 'status', isCodeTableFormatter: function(val) { if(val.status===1){ return '成功' }else{ return '失败' } } } ] ``` - **带图标列** ```js cols:[ { label: '目标类型', prop: 'targetType', isIcon: true, filter: function(val) { if (val === 4) { return '特定用户' } else if (val === 3) { return '新注册用户' } else if (val === 2) { return '标签用户' } else if (val === 1) { return '全部用户' } }, icon: function(val) { if (val === 4) { return 'el-icon-mobile' } else { return false } }, handlerClick: this.handlerClick } ] ``` ## 开始封装 ```js ``` # 实战配置某页面,咱先看配置图片是不是省事多了，而且条理清楚 ![1.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1af2e019eef401090f3711e9782a529~tplv-k3u1fbpfcp-watermark.image) ![2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/180dce30526440ab8869729eee6923cd~tplv-k3u1fbpfcp-watermark.image) ```js ``` # 结尾 `filterPane.vue`、`tablePane.vue`已完成，有些特殊页面只需要复制下到当前特殊页面的`components`里改动下就可以了，目前还在不断完善中，大家有什么问题可以提出来，也好进一步优化。完整源文件在[**gitHub**](https://github.com/kinoaa/k-table),可以下载直接使用，后续会持续更新我给起了个名**k-table**以**k**开头代表快速的意思 [**k-table**](https://github.com/kinoaa/k-table) 如果对你有帮助，请点亮你的小星星⭐⭐⭐哦~（疯狂暗示）超级简单的API，提供手把手教你使用的实例！ # 写在最后我是**凉城a**，一个前端，热爱技术也热爱生活。与你相逢，我很开心。 [如果你想了解更多，请点这里，期待你的小⭐⭐](https://github.com/kinoaa) - **文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊** - **本文首发于掘金，未经许可禁止转载💌**