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"