tabel组件垂直居中问题

:v-deep .uni-table-td {
  height: 100% !important;
  vertical-align: middle !important;
}

<template>
    <view class="report-explain">
        <view class="report-explain-table" v-if="pagesInfo.content.length">
            <uni-table border stripe emptyText="暂无更多数据">
                <!-- 表头行 -->
                <uni-tr>
                    <uni-th
                        align="center"
                        width="80rpx"
                        class="t-header"
                        v-for="(item, index) in pagesInfo.haderList"
                        :key="index"
                        >{{ item }}</uni-th
                    >
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="(item, index) in pagesInfo.content" :key="index">
                    <uni-td v-for="(item2, index2) in item" :key="index2">
                        {{ item2 }}
                    </uni-td>
                </uni-tr>
            </uni-table>
        </view>
    </view>
</template>

<script>
import request from "@/common/request.js";
export default {
    data() {
        return {
            queryData: {},
            pagesInfo: {
                haderList: [],
                content: []
            }
        };
    },
    onShow() {},
    onLoad(query) {
        this.queryData = query;
    },
    methods: {
    }
};
</script>
<style lang="scss" >
.report-explain {
    padding: 40rpx 32rpx;
    .report-explain-table {
        border-radius: 20rpx;
        overflow: hidden;
        ::v-deep {
            .uni-table-th {
                background: #dde7ea;
                white-space: nowrap;
                height: 100% !important;
                vertical-align: middle !important;
            }
            .uni-table-td:first-child {
                background: #dde7ea;
                height: 100% !important;
                vertical-align: middle !important;
            }
        }
    }
}
</style>