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組件實現二次封裝這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！