Element怎么使用el-table组件实现二次封装

这篇文章主要讲解了“Element怎么使用el-table组件实现二次封装”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Element怎么使用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->             <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>

感谢各位的阅读，以上就是“Element怎么使用el-table组件实现二次封装”的内容了，经过本文的学习后，相信大家对Element怎么使用el-table组件实现二次封装这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！