移动端简易表格，我不允许你还不会

最近用vant组件做项目的时候，有时候想要用到表格组件来展示数据，但里面没有，最后自己只能简易做一个
表格可以完成功能有：
1、自适应不同屏幕
2、可以勾选框
3、数据过多时可固定表头
直接上代码：
布局

        <div class="head-content2">
            <van-row class="table-column" :style="{ width: tableAllWidth / 37.5 + 'rem' }">
                <van-col class="th" v-for="(item, index) in tableColumns" :style="{ width: item.width / 37.5 + 'rem' }"
                    :key="index">{{ item.title }}</van-col>
            </van-row>

            <div :style="{ width: tableAllWidth / 37.5 + 'rem', overflow: 'auto' }">
                <van-row :style="{ width: tableAllWidth / 37.5 + 'rem' }"
                    v-for="(item, index) in LstPDDL005_QueryTbajm006_Dto" :key="index" class="list-tr">
                    <van-col style="
            width: 1.6rem;
             display: flex;
             align-items: center;
             justify-content: center;
          " class="td">
                        <van-checkbox v-model="item.checked" shape="square"></van-checkbox>
                    </van-col>
                    <van-col v-for="(context, i) in tableColumns.filter(
                        (x) => x.dataIndex !== 'select'
                    )" :key="i" class="td" :style="{ width: context.width / 37.5 + 'rem' }">
                        {{ item[context.dataIndex] }}
                    </van-col>
                </van-row>
            </div>
        </div>

样式

.head-content2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* border: 2px solid #eee; */
    background: rgba(247, 248, 250, 1);
    box-sizing: border-box;
    overflow: auto;
    max-height: 300px;
    max-height:100vh; // 改成100vh时，达到一个屏幕列会固定在最顶端
}

.table-column {
    height: 40px;
    line-height: 40px;
    background: #136dc7;
    color: #fff;
    box-sizing: border-box;
}

.th {
    box-sizing: border-box;
    border-left: 0.5px solid #ccc;
    border-bottom: 0.5px solid #ccc;
    text-align: center;
}
.list-tr {
    height: 30px;
    line-height: 30px;
}

.td {
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #000;
    border-left: 0.5px solid #ccc;
    border-bottom: 0.5px solid #ccc;
}

数据源

data(){
return{
      tableColumns: [
                { title: "选择", dataIndex: "select", width: "60" },
                { title: "字段1", dataIndex: "spoolNr", width: "100" },
                { title: "字段2", dataIndex: "spoolNr2", width: "150" },
                { title: "字段3", dataIndex: "spoolNr3", width: "80" },
                { title: "字段4", dataIndex: "spoolNr4", width: "90" },
                { title: "字段5", dataIndex: "spoolNr5", width: "80" },
                { title: "字段6", dataIndex: "spoolNr6", width: "80" },
                { title: "字段7", dataIndex: "spoolNr7", width: "140" },
                { title: "字段8", dataIndex: "spoolNr8", width: "100" },
                { title: "字段9", dataIndex: "spoolNr9", width: "80" },
                { title: "字段10", dataIndex: "spoolNr10", width: "80" },
            ],
            LstPDDL005_QueryTbajm006_Dto: [
                { id: '1', spoolNr: '111' },
                { id: '2', spoolNr: '111' },
                { id: '3', spoolNr: '111' },
                { id: '4', spoolNr: '111' },
                { id: '5', spoolNr: '111' },
                { id: '6', spoolNr: '111' },
                { id: '7', spoolNr: '111' },
                { id: '8', spoolNr: '111' },
                { id: '9', spoolNr: '111' },
                { id: '10', spoolNr: '111' },
                { id: '11', spoolNr: '111' },
                { id: '12', spoolNr: '111' },
            ],
}
},
computed:{
 tableAllWidth() {
            let all = 0;
            this.tableColumns.forEach((ele) => {
                all += Number(ele.width);
            });
            return all;
        },
}

最后上下效果图：