利用粘性定位（position: sticky；） 封装一个移动端可冻结首行和第一列的表格

兼容性分析：
1.position： sticky 属性的兼容性：chrome 56 以上，edge 16以上，ie不支持；
2.由上述属性决定的该表格更适用于不考虑兼容性的移动端；

<template>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th v-for="item0 in thData" :key="item0.value">
                        {{ item0.label }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item1 in tbData" :key="item1.toString()">
                    <td
                        v-for="item2 in thData"
                        :key="item2.value"
                        @click="openMagnifier(thData, item1)"
                    >
                        {{ item1[item2.value] }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <van-popup
        v-model:show="magnifierShow"
        closeable
        position="top"
        :style="{
            'max-height': '70%',
            'margin-top': '50px',
            'padding-top': '20px',
        }"
    >
        <van-divider
            :style="{
                color: '#a1a1a1',
                borderColor: '#a1a1a1',
                padding: '0 16px',
            }"
        >
            详细内容
        </van-divider>
        <van-cell
            v-for="(cell, i) in currentCell"
            :key="i"
            :title="cell['label']"
            :value="cell['data']"
        />
    </van-popup>
</template>
 
<script>
import { reactive, toRefs } from 'vue'
export default {
    props: {
        thData: Array,
        tbData: Array,
    },
    setup(props, { emit }) {
        const { thData, tbData } = toRefs(props)

        // data
        const state = reactive({
            magnifierShow: false,
            currentCell: [],
        })

        // methods
        const openMagnifier = (head, body) => {
            state.magnifierShow = true
            state.currentCell = head.map((v) => {
                v['data'] = body[v['value']]
                return v
            })
        }

        return {
            ...toRefs(state),
            thData,
            tbData,
            openMagnifier,
        }
    },
}
</script>
 
 
 
<style lang="scss" scoped>
@import './index.scss';
</style>

.table-container {
  table {
    border-collapse: collapse;
    th,
    td {
      text-align: center;
      min-width: 50px;
      max-width: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      line-height: 17px;
      text-align: center;
      padding: 9px 14px 8px;
      border-top: 1px solid #e5e5e5;
      border-right: 1px solid #e5e5e5;
    }
    th {
      background-color: #eaf2fc;
      position: sticky;
      top: -1px;
    }
    td {
      background-color: #fff;
    }

    td:first-child {
      background-color: #fff;
      position: sticky;
      left: 0px;
    }
    th:first-child {
      position: sticky;
      left: 0px;
      z-index: 666;
    }
  }
}