Element使用el-table组件二次封装
前言
在vue开发中使用element-ui的el-table时一般都需要进行封装以便于复用,提高开发效率,减少重复代码,这篇博客对el-table进行简单的二次封装:
一、安装引入
Element官方文档
npm
安装element-ui:
npm i element-ui -S
可以看文档按需引入,这里为了方便直接全局引入了:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui' // 全局引入element-ui import 'element-ui/lib/theme-chalk/index.css' // 样式文件需要单独引入 Vue.config.productionTip = false Vue.use(ElementUI) new Vue({ router, store, render: h => h(App) }).$mount('#app')
二、封装功能
新建一个chris-el-table组件,遍历表头变量tableTitle
使用v-for
循环生成el-table-column
,使用slot
来实现自定义单元格:
<template> <div class="table-container"> <el-table :data="tableData" width="100%" :row-class-name="rowClassName" :height="height" :row-style="{height: `${rowHeight}px`}"> <template v-for="(item, index) in tableTitle"> <slot v-if="item.slot" :name="item.slot"></slot> <el-table-column v-else :key="index" :prop="item.property" :label="item.label" :min-width="item.minWidth ? item.minWidth : ''" :width="item.width ? item.width : ''"> </el-table-column> </template> </el-table> </div> </template> <script> export default { name: 'chris-el-table', props: { tableData: { // 表格数据 type: Array, default: () => { return [] } }, tableTitle: { // 表格头标题 type: Array, require: true }, height: { // 表格高度 type: [Number, String], default: '100%' }, rowHeight: { // 表格行高 type: [Number, String], default: 44 } }, data () { return {} }, methods: { rowClassName (e) { return e.rowIndex % 2 === 0 ? '' : 'light-line' } } } </script>
三、样式覆盖
根据需要覆盖el-table的默认样式:
<style scoped lang="scss"> .table-container { /deep/ .el-table { background-color: transparent; &::before { // 表格底部边框 background: none; } tbody tr:hover > td { // 表格触碰样式 background-color: #F5F7FA; } } /deep/ .el-table__header-wrapper { .el-table__cell { // 表头样式 height: 44px; padding: 0; background: #FFFFFF; border-bottom: #EBEEF5 solid 1px !important; text-align: center; } } /deep/ .el-table__body-wrapper { &::-webkit-scrollbar { // 表格滚动条 width: 0 !important; } .el-table__row { // 表格行样式 background-color: #F5F7FA; .el-table__cell { padding: 0; text-align: center; border-bottom: #EBEEF5 solid 1px !important; } } .light-line { // 高亮行颜色 background-color: #FFFFFF; } } } </style>
四、使用组件
直接传入表头数据tableTitle
和表格数据tableData
:
<chris-el-table :table-title="tableTitle" :table-data="tableData"> </chris-el-table>
表头数据tableTitle
大概是这样:
tableTitle: [ { label: '日期', property: 'date' }, { label: '姓名', property: 'name' }, { label: '地址', property: 'address' }, { slot: 'handle' } ]
表格数据tableData
对应property
,大概长这样:
tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ]
需要自定义的单元格使用slot
,对el-table-column
进行修改:
<chris-el-table :table-title="tableTitle" :table-data="tableData"> <el-table-column slot="handle" label="操作"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)">查看</el-button> </template> </el-table-column> </chris-el-table>
源码扔在最后:https://github.com/chrischen0405/element-component-in-vue
以上就是Element使用el-table组件二次封装的详细内容,更多关于Element el-table二次封装的资料请关注猪先飞其它相关文章!
原文出处:https://www.jianshu.com/p/67fd0118fce1
相关文章
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 本文主要介绍了vue+element实现动态换肤的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
- 这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...2021-03-03
- 这篇文章主要介绍了Vue 组件复用多次自定义参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19