elementUI el-table组件封装（自定义列）

本文主要是介绍elementUI el-table组件封装（自定义列），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<template>
    <div class="loading-table" v-loading="tableLoading">
        <el-table :data="tableData" border stripe>
            <el-table-column type="index" label="序号" align="center" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
                </template>
            </el-table-column>
            <template v-for="(item, index) in tableOption">
                <el-table-column
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :align="item.align || 'center'"
                    :show-overflow-tooltip="item.overHidden || true"
                    width="200"
                    v-if="item.prop === 'monitoringTime'"
                >
                <!--monitoringTime较长显示不全，字段特殊处理-->
                    <template slot-scope="scope">
                        <span>{{ scope.row[scope.column.property] }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :align="item.align || 'center'"
                    :show-overflow-tooltip="item.overHidden || true"
                    v-else
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row[scope.column.property] }}</span>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.size"
            @current-change="pageChange"
        >
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: 'TableComponents', //table组件
    props: {
        index: {
            //序号
            type: Boolean,
            default: function() {
                return true
            },
        },
        tableLoading: {
            //数据加载
            type: Boolean,
            default: function() {
                return false
            },
        },
        tableData: {
            //表格数据
            type: Array,
            default: function() {
                return []
            },
        },
        tableOption: {
            //表头
            type: Array,
            default: function() {
                return []
            },
        },
        page: {
            //分页
            type: Object,
            default: function() {
                return {
                    total: 0,
                    current: 1,
                    page: 10,
                }
            },
        },
    },
    data() {
        return {}
    },
    methods: {
        //分页改变
        pageChange(val) {
            this.$emit('page-change', val)
        },
    },
}
</script>
<style scoped>
.loading-table {
    width: 100%;
}
</style>

以上为组件代码

//父组件
<template>
    <div class="loadingPageDetail" v-if="showDetail">
        <div class="dialog-top">
            <a :title="'关闭弹出层'" @click="close()"></a>
        </div>
        <div class="dialog-content">
            <div class="title">
                {{ title }}
            </div>
            <TableComponents
                :tableLoading="tableLoading"
                :tableData="tableData"
                :page="page"
                :tableOption.sync="tableOption"
                @page-change="getList"
            />
        </div>
    </div>
</template>
<script>
import { getMeasurementData } from '@index/api/specialLayer'
import TableComponents from './TableComponents'
export default {
    name: 'EquipmentDetailDialog', //设备详情弹窗
    props: {
        showDetail: {
            type: Boolean,
            default: false,
        },
        deviceId: {
            type: String,
            default: '',
        },
        title: {
            type: String,
            default: '',
        },
    },
    components: {
        TableComponents,
    },
    data() {
        return {
            tableLoading: false,
            tableOption: [],
            tableData: [],
            page: {
                total: 0,
                current: 1,
                size: 10,
            },
        }
    },
    watch: {
        showDetail(v) {
            if (v) {
                this.page.current = 1
                this.tableData = []
                this.loadingData()
            }
        },
    },
    methods: {
        loadingData() {
            // 获取数据
            let requestUrl = '/iot/getMeasurementData'
            let params = {
                deviceId: this.deviceId,
                pageNo: this.page.current,
                pageSize: this.page.size,
            }
            getMeasurementData({ url: requestUrl, params: params })
                .then(res => {
                    if (res && res.status === 0) {
                        this.tableData = res.result[0].monitoringDataList
                        this.processData(res.result)
                        this.page.total = res.total
                    }
                })
                .catch(() => {})
        },
        //数据处理
        processData(params) {
            if (params) {
                this.tableOption = [{ label: '监测时间', prop: 'monitoringTime' }]
                this.tableData = []
                params.forEach((v, index) => {
                    let obj = {}
                    v.monitoringDataList.forEach((m, index1) => {
                        if (index === 0) this.tableOption.push({ label: m.flagName, prop: `option${index1}` })
                        obj[`option${index1}`] = `${m.measurement}${m.unit}`
                    })
                    obj.monitoringTime = v.monitoringTime
                    this.tableData.push(obj)
                })
            } else {
                return []
            }
        },
        //分页改变，加载分页数据
        getList(v) {
            this.page.current = v
            this.loadingData()
        },
        //关闭弹窗-清空数据
        close() {
            this.tableData = []
            this.$emit('closeDetail', false)
        },
    },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.loadingPageDetail {
    min-width: 600px;
    height: auto;
    min-height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: #fff;
    padding: 20px;
    .dialog-top {
        display: block;
        height: 15px;
        a {
            width: 16px;
            height: 16px;
            background-image: url('../../../home/assets/close.png');
            background-size: 100%;
            position: absolute;
            z-index: 9;
            display: block;
            top: 10px;
            right: 10px;
        }
    }
    .dialog-content {
        height: auto;
        margin-top: 10px;
        .title {
            height: 48px;
            line-height: 48px;
            padding-left: 10px;
            border-top: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
        }
    }
    /deep/ .el-table td,
    /deep/ .el-table th {
        padding: 9px 0;
    }
}
</style>

表头数据格式：

表格数据格式：

页面效果：

这篇关于elementUI el-table组件封装（自定义列）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！