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

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

        

            
                {{ item.title }}
            

            

                
                    
                        
                    
                    
                        {{ item[context.dataIndex] }}
                    
                
            
        

样式

.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;
        },
}

最后上下效果图：