uni-table 改造源码添加固定表头功能附件修改后源码

Hacker吕小布

已于 2022-07-13 11:57:44 修改

阅读量3.5k

点赞数 11

CC 4.0 BY-SA版权

分类专栏：技术 uniapp 文章标签：前端 javascript html

于 2022-07-11 18:26:23 首次发布

本文链接：https://blog.csdn.net/weixin_45391874/article/details/125725971

通过将uni-table源码复制并封装为自定义组件，实现了固定表头的功能。详细改造步骤包括uni-table、uni-tbody、uni-table-td、uni-table-th、uni-table-thead和uni-table-tr的修改。源码修改后的效果可以在github项目中查看，提供uni-ui 1.4.12版本的uni_table源码，提取码为6666。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github地址:https://github.com/1205093639/uni-table-Fixed_header
实现效果:

1.先找到源码复制出来单独封装成自己的组件

组件源码位置

2.修改

2.1 uni-table

无需改动

2.2 uni-tbody

在这里插入图片描述

<template>
    <!-- #ifdef H5 -->
    <tbody class="uni-tbody" :style="{'max-height':height}">
        <slot></slot>
    </tbody>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="uni-tbody" :style="{'max-height':height}">
        <slot></slot>
    </view>
    <!-- #endif -->
</template>

<script>
export default {
   
   
    name: 'uniBody',
    props: ['height'],
    options: {
   
   
        virtualHost: true
    },
    data() {
   
   
        return {
   
   

        }
    },
    created() {
   
    },
    methods: {
   
   }
}
</script>

<style>
.uni-tbody {
   
   
    display: block;
    width: 100%;
    overflow: auto;
}
</style>

2.3 uni-table-td

<template>
    <!-- #ifdef H5 -->
    <td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{'max-width':width + 'px','text-align':align}">
        <slot></slot>
    </td>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <!-- :class="{'table--border':border}"  -->
    <view class="uni-table-td" :class="{'table--border':border}" :style="{'max-width':width + 'px','text-align':align}">
        <slot></slot>
    </view>
    <!-- #endif -->
</template>

<script>
/**
 * Td 单元格
 * @description 表格中的标准单元格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Number} 	align = [left|center|right]	单元格对齐方式
 */
export default {
   
   
    name: 'uniTd',
    options: {
   
   
        virtualHost: true
    },
    props: {
   
   
        width: {
   
   
            type: [String, Number],
            default: ''
        },
        align: {
   
   
            type: String,
            default: 'left'
        },
        rowspan: {
   
   
            type: [Number, String],
            default: 1
        },
        colspan: {
   
   
            type: [Number, String],
            default: 1
        }
    },
    data() {
   
   
        return {
   
   
            border: false
        };
    },
    created() {
   
   
        this.root = this.getTable()
        this.border = this.root.border
    },
    methods: {
   
   
        /**
         * 获取父元素实例
         */
        getTable() {
   
   
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== 'uniTable') {
   
   
                parent = parent.$parent;
                if (!parent) return false;
                parentName = parent.$options.name;
            }
            return parent;
        },
    }
}
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-td {
   
   
    display: table-cell;
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 1px $border-color solid;
    font-weight: 400;
    color: #606266;
    line-height: 23px;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
    word-wrap: break-word;
}
.table--border {
   
   
    border-right: 1px $border-color solid;
}
</style>

2.4 uni-table-th

<template>
    <!-- #ifdef H5 -->
    <th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ 'max-width': width + 'px', 'text-align': align }">
        <view class="uni-table-th-row">
            <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
                <slot></slot>
                <view v-if="sortable" class="arrow-box">
                    <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>