基于ElementUi封装table组件——包含表头工具栏、多级表头、合并行、分页

摘要:
--如过有嵌套,递归多级表头--˃0"˃˂!

表格组件WTable.vue

<template>
    <div class="wTable">
        <!--头部工具栏 -->
        <div v-if="tools && tools.length>0 && tools[0].label"class="toolBar">
            <template v-for="(tool, key) in tools">
                <!--具名插槽 -->
                <slot v-if="tool.slot":name="tool.slot" />
                <el-button
                    v-else
                    :key="key":type="tool.type":size="tool.size":plain="tool.plain":round="tool.round":circle="tool.circle":icon="tool.icon":style="tool.style":disabled="tool.disabled"@click.native.prevent="tool.method()"
                >{{ tool.label }}
                </el-button>
            </template>
        </div>
        <!--表格 -->
        <el-table
            id="wTable"ref="wTable"v-loading.wTable="woptions.loading"v-tableDrag 
            :data="data":height="tHeight":stripe="woptions.stripe":border="woptions.border":fit="woptions.fit":span-method="spanMethod":row-key="rowKey"@selection-change="handleSelectionChange"
        >
            <!--多选框 -->
            <el-table-column v-if="woptions.mutiSelect":reserve-selection="true"type="selection":selectable="woptions.checkSelect"style=" 55px;"align="center" />
            <!--序号 -->
            <el-table-column v-if="woptions.index"label="序号"type="index"style=" 55px;"align="center" />
            <!--数据列 -->
            <template v-for="(column, index) of columns">
                <!--如过有嵌套,递归多级表头 -->
                <template v-if="column.children && column.children.length > 0">
                    <WColumn :key="index":column="column" />
                </template>
                <!--没有正常显示 -->
                <template v-else>
                    <!--具名插槽 -->
                    <slot v-if="column.slot":name="column.slot" />
                    <el-table-column
                        v-else-if="!column.isHide"v-slot="scope":key="index":prop="column.prop":label="column.label":type="column.type":min-width="column.minWidth":width="column.width":align="column.align":fixed="column.fixed":show-overflow-tooltip="column.tooltip":class-name="column.class":sortable="column.sort"
                    >
                        <!--是否需要特殊处理 -->
                        <template v-if="column.formatter">
                            <span v-html="column.formatter(scope.row, column)" />
                        </template>
                        <template v-else>
                            <!--正常显示 -->
                            <span>{{ scope.row[column.prop] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </template>
        </el-table>
        <!--分页 -->
        <div v-if="isPagination"class="pagination">
            <el-pagination
                background
                :current-page="wpagination.currentPage":page-sizes="wpagination.pageArr":page-size="wpagination.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
/**
 * 使用方法:
 * 通用的可参考 views/businessManage/businessList
 * 多级表头可参考 views/dingdang/privacyCallInfo
 * 合并行可参考 views/codeManage/routeTest
 */import WColumn from './WColumn'export default{
    name: 'WTable',
    components: { WColumn },
    props: {
        //头部按钮组
tools: {
            type: Array,
            default() {
                return[
                    {method() {}}
                ]
            }
        },
        //数据
data: {
            type: Array,
            requre: true,
            default() {
                return[]
            }
        },
        //合并行
spanMethod: Function,
        //多选回显key
rowKey: {
            type: String,
            default: 'id'},
        /**
         * 表格默认配置
         * height: 表格高度
         * stripe: 是否为斑马纹 table
         * border: 是否带有纵向边框
         * fit: 列的宽度是否自撑开
         * mutiSelect: 是否开启多选
         * loading: 添加loading
         */options: {
            type: Object,
            default() {
                return{
                    stripe: true,
                    border: false,
                    fit: true,
                    mutiSelect: false,
                    loading: false,
                    index: true}
            }
        },
        //表格高度
tHeight: {
            type: Number,
            default: 200},
        /**
         * 列集合
         * prop: 列字段
         * label: 列名称
         * align: 文本显示位置
         *  列固定宽度,例:200
         * minWidth: 自适应宽度 例: 200 或 20%
         * type: 类型
         * formatter: 特殊处理
         * slot: 特殊列名称
         * isHide: 是否隐藏列,用于动态展示列
         * tooltip: 超出是否...
         * class: 列的class
         * sort: 是否排序
         */columns: {
            type: Array,
            default() {
                return[]
            },
            require: true},
        //数据总数
total: {
            type: Number,
            default: 0},
        //是否显示分页
isPagination: {
            type: Boolean,
            default: true},
        /**
         * 分页参数
         * pagesize:每页显示的条数
         * currentPage:当前页码
         * pageArr: 显示多少条集合
         * background: 是否要背景
         */pagination: {
            type: Object,
            default() {
                return{
                    pagesize: 10,
                    background: true,
                    currentPage: 1,
                    pageArr: [10, 20, 50, 100]
                }
            }
        }
    },
    data() {
        return{
            //默认的表格配置
woptions: {
                stripe: true,
                border: false,
                fit: true,
                mutiSelect: false,
                loading: false,
                index: true,
                checkSelect() {
                    return true}
            },
            //默认的分页配置
wpagination: {
                pagesize: 10,
                background: true,
                currentPage: 1,
                pageArr: [10, 20, 50, 100]
            }
        }
    },
    created() {
        //扩展配置,目的是引用组件不用把配置全写一遍
        this.woptions =Object.assign({}, this.woptions, this.options)
        this.wpagination =Object.assign({}, this.wpagination, this.pagination)
    },
    methods: {
        //表格多选
handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val)
        },
        //选择每页展示的条数
handleSizeChange(size) {
            this.$emit('handleSizeChange', size)
        },
        //点击第几页
handleCurrentChange(currentPage) {
            this.$emit('handleCurrentChange', currentPage)
        }
    }
}
</script>

<style lang="scss"scoped>.wTable {box-shadow:0 0 10px #eee;.toolBar {
        padding:10px;overflow:hidden;
    }.pagination {padding:30px 0;text-align:center;
    }#table {width:100%;
    }}
</style>

多级表头递归子组件WColumn.vue

<template>
    <el-table-column
        v-if="!column.isHide":prop="column.prop":label="column.label":type="column.type":min-width="column.minWidth":width="column.width":align="column.align":fixed="column.fixed":show-overflow-tooltip="column.tooltip":class-name="column.class":sortable="column.sort"
    >
        <!--数据列 -->
        <template v-for="(item, key) of column.children">
            <template v-if="item.children && item.children.length > 0">
                <WColumn :key="key":column="item" />
            </template>
            <template v-else>
                <!--具名插槽 -->
                <slot v-if="item.slot":name="item.slot" />
                <el-table-column
                    v-else-if="!item.isHide"v-slot="scope":key="key":prop="item.prop":label="item.label":type="item.type":min-width="item.minWidth":width="item.width":align="item.align":fixed="item.fixed":show-overflow-tooltip="item.tooltip":class-name="item.class":sortable="item.sort"
                >
                    <!--是否需要特殊处理 -->
                    <template v-if="item.formatter">
                        <span v-html="item.formatter(scope.row, item)" />
                    </template>
                    <template v-else>
                        <!--正常显示 -->
                        <span>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
            </template>
        </template>
    </el-table-column>
</template>

<script>export default{
    name: 'WColumn',
    props: {
        column: {
            type: Object,
            default() {
                return{}
            }
        }
    }
}
</script>

自定义点击表格横向滚动指令v-tableDrag

main.js将directices.js引入即可

import Vue from 'vue'

Vue.directive('tableDrag', {
    inserted: function(el) {
        el = el.getElementsByClassName('el-table__body-wrapper')[0]
        el.style.cursor = 'grab'
        el.onmousedown = function() {
            let gapX = event.clientX
            let startX = el.scrollLeft
            document.onmousemove = function(e) {
                let x = e.clientX - gapX
                el.scrollLeft = startX - x
                return false
            }
            document.onmouseup = function() {
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
})

免责声明:文章转载自《基于ElementUi封装table组件——包含表头工具栏、多级表头、合并行、分页》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C#中使用Surfercentos8部署redis5.0.7集群下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Hive metastore源码阅读(一)

不要问我为什么,因为爱,哈哈哈哈。。。进入正题,最近做项目顺带学习了下hive metastore的源码,进行下知识总结。 hive metastore的整体架构如图: 一、组成结构: 如图我们可以看到,hive metastore的组成结构分为 客户端 服务端 ,那么下来我们逐一进行分析: 1、客户端 从代码的角度来看:尼玛太多了。。我们从入口HIV...

Java解决关键路径问题

参考: https://www.cnblogs.com/lishanlei/p/10707808.html https://blog.csdn.net/wang379275614/article/details/13990163  关键路径问题来源于实际的生产活动,是项目管理的经典问题。 在一个复杂的项目中,整体项目的完成依赖与各个子项目的完成,而子项目...

MySQL的锁(1)

    锁机制是数据库系统区别于文件系统的一个关键特性,他可以确保用户能以一致的方式读取和修改数据。     为了保证一致性,必须有锁的介入。MySQL操作缓冲池中的LRU列表,删除、添加、移动LRU列表中的元素等地方也都适用锁,从而允许对多种不同资源的并发访问。     打个比方,我们到淘宝上买一件商品,商品只有一件库存,这个时候如果还有另一个人买,那么...

html使用代码大全

<DIV style="FONT-SIZE: 9pt">1)贴图:<img src="http://t.zoukankan.com/图片地址">1)首行缩进2格:<p style="TEXT-INDENT: 2em">html使用代码大全</p> 2)加入连接:<a href="http://t.zou...

mysql性能优化-慢查询分析、优化索引和配置【转】

一、优化概述 二、查询与索引优化分析 1性能瓶颈定位 Show命令 慢查询日志 explain分析查询 profiling分析查询 2索引及查询优化 三、配置优化 1)      max_connections 2)      back_log 3)      interactive_timeout 4)      key_buffer_size 5)  ...

Hbase之批量数据写入

/** * Created by similarface on 16/8/16. */ import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import...