Element使用el-table组件二次封装

更新时间：2022年06月24日 11:11:01 作者：幽小鬼

这篇文章主要为大家介绍了Element使用el-table组件二次封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

在vue开发中使用element-ui的el-table时一般都需要进行封装以便于复用，提高开发效率，减少重复代码，这篇博客对el-table进行简单的二次封装：

一、安装引入

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 =&gt; 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二次封装的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

VUE里如何修改element-ui的显示层次与上下间隔
这篇文章主要介绍了VUE里如何修改element-ui的显示层次与上下间隔问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vue实现动态创建和删除数据的方法
下面小编就为大家分享一篇Vue实现动态创建和删除数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
IE11下处理Promise及Vue的单项数据流问题
最近我开发的公司的竞赛网站被发现在IE11下排行榜无数据，但是在其他浏览器没问题，我然后打开控制台一看，发现有问题，纠结了半天才捣腾好，下面小编把方案分享处理，供大家选择
2019-07-07
一篇文章告诉你如何编写Vue插件
这篇文章主要为大家介绍了如何编写Vue插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
详解如何在Vue2中实现组件props双向绑定
在Vue2中组件的props的数据流动改为了只能单向流动，如何在Vue2中实现组件props双向绑定，一起来跟小编看看。
2017-03-03
深度解析 Vue3 的响应式机制
这篇文章主要介绍了深度解析 Vue3 的响应式机制，今天就带大家深入了解一下 Vue 3 的响应式机制，相信学完今天的内容，会对响应式机制有更深地体会；文章会结合代码示例，帮大家掌握响应式机制的进阶用法，让我们正式开始学习吧
2022-09-09
Vue3自定义指令的实践示例
这篇文章主要为大家详细介绍了Vue3中自定义指令的实践，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下
2023-06-06
vue中的vue-router query方式和params方式详解
这篇文章主要介绍了vue中的vue-router query方式和params方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue3中实现文本显示省略号和tooltips提示框的方式详解
在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下
2024-04-04
el-date-picker日期选择限制范围的实例代码
这篇文章主要介绍了el-date-picker日期选择限制范围,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09