vue 二次封装elemen ui 表格

头秃女孩子
已于 2024-01-18 14:42:03 修改
阅读量393
点赞数 9
文章标签： vue.js ui elementui
于 2024-01-18 14:39:51 首次发布
本文链接：https://blog.csdn.net/xue_tingting/article/details/135673886
版权
<template>
    <div class="width flex1 height">
        <!-- 二次封装表格 -->
        <!-- highlight-current-row -->
        <el-table :ref="tableRef" v-loading="loading" v-bind="$attrs" v-on="$listeners" highlight-current-row :data="dataList" height="100%" :cell-style="cellStype" :border="isShowBorder" class="my-el-table" :id="tableId" @selection-change="handleSelectionChange" @queryDout="queryDout">
            <!-- 多选 -->
            <el-table-column v-if="showSelection" type="selection" width="40" :selectable="checkSelect" :align="textAlign" :fixed="fixedSelection">
            </el-table-column>
            <!-- 用作有type='selection'的时候 -->
            <slot name="prepend"></slot>
            <!-- showSequence是否回显序号 -->
            <el-table-column label="序号" v-if="showIndex" type="index" :index="index" :width="indexWidth" :align="textAlign" fixed>
                <template slot-scope="scope">
                    <!-- 根据item.format值进行判断，是否需要对props进行另外的操作(比如格式化等) -->
                    <slot v-if="formatIndex" :row="scope.row" name="selfIndex" :index="index(scope.$index)"></slot>
                    <span v-else>{{ index(scope.$index)}}</span>
                </template>
            </el-table-column>

            <!--  使用v-bind="item" 可以达到vue组件透传的效果，继承没有通过props传过来的其他属性 -->
            <template v-for="(item, index) in columns">
                <el-table-column v-if="!item.notShow" :key="index" :align="textAlign" :formatter="item.formatter" :label="item.label" v-bind="item" :min-width="item.minWidth || '100'" :sortable="item.sortable ? item.sortable : false" :fixed="item.fixed?item.fixed:false">
                    <!-- 判断标头是否格式化 -->
                    <template slot="header" slot-scope="scope">
                        <slot v-if="item.formatHeader" :name="'header_'+item.prop" :row="scope.row" :index="scope.$index"></slot>
                        <span v-else>{{item.label}}</span>
                    </template>
                    <!-- 判断是否需要排序功能 -->
                    <template slot-scope="scope">
                        <!-- 根据item.format值进行判断，是否需要对props进行另外的操作(比如格式化等) -->
                        <slot v-if="item.format ? item.format : false" :row="scope.row" :name="item.prop" :index="scope.$index"></slot>
                        <span v-else>{{ $util.formatTextEmpty(scope.row[item.prop]) }}</span>
                    </template>
                    <template v-if="item.children && item.children.length > 0">
                        <el-table-column v-for="(item2, index2) in item.children" :label="item2.label" :prop="item2.prop" v-bind="item2" :key="'index2'+index2" :align="textAlign">
                            <!-- 判断二级表头是否格式化 -->
                            <template slot="header" slot-scope="scope">
                                <slot v-if="item2.formatHeader" :name="'header_'+item2.prop" :row="scope.row" :index="scope.$index"></slot>
                                <span v-else>{{item2.label}}</span>
                            </template>
                            <template slot-scope="scope">
                                <slot v-if="item2.format ? item2.format : false" :row="scope.row" :name="item2.prop" :index="scope.$index"></slot>
                                <span v-else> {{ $util.formatTextEmpty(scope.row[item2.prop])}}</span>
                            </template>
                            <template v-if="item2.children && item2.children.length">
                                <el-table-column v-for="(item3, index3) in item2.children" :prop="item3.prop" :label="item3.label" v-bind="item3" :key="'index3'+index3" :align="textAlign">
                                    <template slot-scope="scope">
                                        <slot v-if="item3.format ? item3.format : false" :row="scope.row" :name="item3.prop" :index="scope.$index"></slot>
                                        <span v-else> {{ $util.formatTextEmpty(scope.row[item3.prop]) }}</span>
                                    </template>
                                </el-table-column>
                            </template>
                        </el-table-column>
                    </template>
                </el-table-column>
            </template>

            <!-- 自定义列 -->
            <slot name="selfCols"></slot>

            <!-- 单独写了操作 根据条件判断是否需要操作列 -->
            <el-table-column label="操作" align="center" v-if="showOperation" :width="handleWidth" :fixed="handleFixed ? handleFixed:false">
                <template slot="header" v-if="isFormatHandleHeader">
                    <slot name="handle-header"></slot>
                </template>
                <template slot-scope="scope">
                    <slot :row="scope.row" name="handle" :index="scope.$index"></slot>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    //        inject: ['checkSelectableCom'],
    props: {
        tableRef: {
            type: String,
            default: () => {
                return 'table'
            },
        },
        isLoadFinish: {
            // 是否要显示表格了
            default: true,
            type: Boolean,
        },
        loading: {
            // 是否显示loading
            default: false,
            type: Boolean,
        },

        dataList: {
            // 表格数据
            default: () => [],
            type: Array,
            require: true,
        },

        columns: {
            // 表格列的数组
            default: [],
            type: Array,
            require: true,
        },

        handleWidth: {
            // 操作列的宽度
            type: [String, Number],
            default: () => {
                return 120
            },
        },
        handleFixed: {
            type: [String, Boolean],
            default: () => {
                return false
            },
        },
        fixedSelection: {
            type: [String, Boolean],
            default: () => {
                return 'left'
            },
        },
        showSelection: {
            // 是否显示多选框
            default: false,
            type: Boolean,
        },
        showIndex: {
            // 是否显示序号列
            default: true,
            type: Boolean,
        },
        showOperation: {
            // 是否显示操作列
            default: false,
            type: Boolean,
        },
        index: {
            // 序号排序
            type: [Function],
            required: false,
        },
        formatIndex: {
            // 是否自定义序号列
            type: Boolean,
            default: false,
        },
        indexWidth: {
            // 序号列的宽度
            default: 60,
            type: Number,
        },
        // 可选表格校验格式
        // isSelectable:{
        //     type:Object,
        //     validator: function (value) {
        //         let array = ['flag', 'source']
        //         if (array.every(item => typeof value[item] !== 'undefined')) {
        //             return value
        //         } else {
        //             throw '检查可选表格传参格式！'
        //         }
        //     },
        //     default: () => ({
        //         flag: false,
        //         source: 'other'
        //     }),
        // },
        // isSelectable:{
        //     type:Boolean,
        //     default: false
        // },
        isFormatHandleHeader: {
            // 是否自定义操作列
            type: Boolean,
            default: false,
        },
        isShowBorder: {
            // 是否显示边框
            type: Boolean,
            default: true,
        },
        textAlign: {
            // 是否居中展示
            type: String,
            default: 'center',
        },
        isCellStype: {
            type: Boolean,
            default: false,
        },
    },

    data() {
        return {
            heightDist: 0,
            tableId: new Date().getTime(),
        }
    },
    updated() {
        this.$nextTick(() => {
            this.$refs['table'].doLayout()
        })
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
        /* this.checkBrowser();
     this.initTaleHeight();*/
    },
    methods: {
        queryDout() {},

        // 监听窗口变化，解决表格列固定列后有时候固定表格会盖住滚动条导致不能滑动的问题
        initTaleHeight() {
            let _this = this
            setTimeout(() => {
                let head = $(
                    '#' + this.tableId + ' .el-table__header-wrapper'
                )[0] // 表头的高度
                let body1 = $('#' + this.tableId + ' .is-scrolling-left')[0] // 出现横向滚动条表格的高度，滚动条滑到左边
                let body2 = $('#' + this.tableId + ' .is-scrolling-middle')[0] // 出现横向滚动条表格的高度，滚动条滑到中间
                let body3 = $('#' + this.tableId + ' .is-scrolling-right')[0] // 出现横向滚动条表格的高度，滚动条滑到右边
                let body4 = $('#' + this.tableId + ' .is-scrolling-none')[0] // 出现横向滚动条表格的高度，滚动条滑到右边
                let height = 0
                if (head) {
                    //判断是否获取到表头元素
                    if (body1) {
                        //判断是否表格中是否存在横向滚动条
                        height = $(body1).height() - this.heightDist // 10 是x轴滚动条的高度
                    } else if (body2) {
                        height = $(body2).height() - this.heightDist
                    } else if (body3) {
                        height = $(body3).height() - this.heightDist
                    } else {
                        height = $(body4).height() || 0
                    }
                    if (height > 0) {
                        $('.el-table__fixed-body-wrapper').css(
                            'height',
                            height + 'px'
                        )
                        $('.el-table__fixed').css(
                            'height',
                            height + $(head).height() + 'px'
                        )
                    }
                }
            }, 200)
        },
        // 查看浏览器版本
        checkBrowser() {
            var userAgent = navigator.userAgent //取得浏览器的userAgent字符串
            var isFirefox = userAgent.indexOf('Firefox') > -1 // 是否是火狐  ，火狐内核Gecko
            var isWebKit = userAgent.indexOf('WebKit') > -1 // 是否是WebKit 内核
            var isChrome = userAgent.indexOf('Chrome') > -1 // 是否是谷歌
            var isOpera = userAgent.indexOf('Opera') > -1 // 是否是opera ， opera内核 Presto
            var isTrident = userAgent.indexOf('Trident') > -1 // 是否是IE内核
            var isIE =
                userAgent.indexOf('compatible') > -1 &&
                userAgent.indexOf('MSIE') > -1 &&
                !isOpera
            //  因为ie10-ie11的版本问题，不再支持document.all判断，所以ie判断函数要重新写
            var isIeL = !!window.ActiveXObject || 'ActiveXObject' in window //判断是否IE浏览器
            if (isFirefox) {
                this.heightDist = 17 // 火狐滚动条是默认的样式，高度是17px
            } else if (isWebKit || isChrome) {
                this.heightDist = 10 // 谷歌滚动条是自定义的样式，样式设置多少就是多少，高度是10px，
            } else {
                this.heightDist = 1 // ie浏览器滚动条是默认的样式，稍微减一下高度就可以
            }
        },
        //判断多选是否能下载 用于运营、运维表单
        // flag 开启条件禁用 source 模块名称
        checkSelect(row, index) {
            return true
            /* // 存在校验函数 走校验 反之可选择 不做限制
       if (typeof this.checkSelectableCom === 'function') {
           return this.checkSelectableCom(row,index);
       } else {
           return true
       }
           
        },
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val)
        },
    },
}
</script>
<style lang="scss" scoped>
</style>
1、使用方式引入组件