好久都没有写文章了，上个月业务繁忙，事情比较多，最近在做移动端中发现了一个好玩的事情，那就是移动端中实现表格，固定列有哪些方法：
1. position: sticky
粘性布局，这个属性也可以实现行和列的固定，在pc端上没有啥问题，但是在手机端上会抖动。
使用注意事项：
要求父级不能够使用overflow：auto,否则不生效。
牛刀小试
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style> *, body, html { margin: 0; padding: 0; box-sizing: border-box; height: 100%; width: 100%; } .condition { height: 50px; background-color: rgb(19, 13, 13); color: #fff; font-size: 2em; text-align: center; } .table-container { width: 100%; height: calc(100% - 50px); overflow: auto; } table { border-collapse: collapse; } th, td { padding: 5px; text-align: center; border: 1px solid #999; min-width: 100px; } th { background-color: #333; color: #fff; position: sticky; top: 0px; } td:first-child { background-color: #333; color: #fff; position: sticky; left: 0px; } th:first-child { position: sticky; left: 0px; top: 0px; z-index: 10; } </style> <script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { let t = new Vue({ el: "#app" }); }); </script> </head> <body> <div id="app"> <!-- 其他东西 --> <div class="condition">条件查询</div> <div class="table-container"> <table> <thead> <tr> <th v-for="(n,i) of 50">字段 {{i+1}}</th> </tr> </thead> <tbody> <tr v-for="(n,i) of 100"> <td v-for="(m,j) of 50">{{j+1}}</td> </tr> </tbody> </table> </div> </div> </body> </html>
pc端的效果如下：
pc端的效果咋们都可以接收，虽然会有点看起来不舒服。
移动端效果
这啥呀，还抖动的，对于真机的测试，安卓会抖动，但是苹果机型不会抖动。这种肯定是不行的，打开ele的table看到人家的表格蛮不错的，那就学习下。
2.多表格实现固定
思路，在ele中，固定是有多个表格来的，所以咋也来搞多个表格。首先将表格分成左右两部分，左边第一列在上下滑动是header部分需要固定；右边第一行在左右滑动时firstRow和header部分也需要是固定的。可将这几个划分区域分别用table填充，滑动tableBody时保持firstRow和firstCol的同步滑动即可。
看看效果图
这回总不会抖动了吧,为了方便大家学习，我就把我的这个组件贡献出来。让有需要的同学使用，vue3都出来了这么久，肯定用vue3了哇!
<script lang='ts' setup> import { computed, Ref, ref } from 'vue' const props = defineProps<{ // 传我表头,表头的列数，需要和tableData每一个对象里的属性值一样 headerData: { title: string, props: string }[], // 表格数据 tableData: { [key: string]: any }[], // 表格高度 tableScrollHeight: number }>() const tableContainer: Ref<HTMLDivElement | null> = ref(null); const firstRowLayer: Ref<HTMLDivElement | null> = ref(null); const firstColLayer: Ref<HTMLDivElement | null> = ref(null); // 第一列数据 const firstCol = computed(() => props.tableData.map(p => { const pArr = Object.keys(p); return p[pArr[0]] })) // 第一个表头，第一列 const header = computed(() => props.headerData[0].title); // 第一行 const firstRow = computed(() => { const rows: string[] = []; props.headerData.forEach((f, i) => { if (i !== 0) { rows.push(f.title) } }) return rows; }) // 表格内容行 const tableBodyRows = computed(() => { let arr: { [key: string]: any }[] = []; props.tableData.forEach((f, index) => { // 接下来排除第一列 let res: { [key: string]: any } = {}; for (const key in f) { if (Object.prototype.hasOwnProperty.call(f, key)) { if (key !== props.headerData[0].title) { res[key] = f[key] } } } arr.push(res) }) return arr }) // 表格内容列 const tableBodyCols = computed(() => { let arr: { title: string, props: string }[] = [] props.headerData.forEach((f, i) => { if (i !== 0) { arr.push(f) } }) return arr; }) // table滚动 const tableScroll = () => { // 首行固定 firstRowLayer.value!.scrollLeft = tableContainer.value!.scrollLeft; // 首列固定 firstColLayer.value!.scrollTop = tableContainer.value!.scrollTop; } </script> <template> <div class="content-table"> <template v-if="props.tableData.length > 0"> <div class="left-div"> <div class="left-div1"> <table> <tr> <th>{{ header }}</th> </tr> </table> </div> <div ref="firstColLayer" class="left-div2" :style="{ height: `calc(100vh - ${tableScrollHeight}px` }" > <table class="left-table2"> <tr v-for="(col, index) in firstCol" :key="index"> <td>{{ col }}</td> </tr> </table> </div> </div> <div class="right-div"> <div ref="firstRowLayer" class="right-div1"> <table class="right-table1" :style="{ width: (firstRow.length - 1) * 100 + 'px' }"> <tr> <th class="first-row-style" v-for="(row, index) in firstRow" :key="index">{{ row }}</th> </tr> </table> </div> <div ref="tableContainer" class="right-div2" :style="{ height: `calc(100vh - ${tableScrollHeight}px` }" @scroll="tableScroll()" > <table class="right-table2" :style="{ width: (firstRow.length - 1) * 100 + 'px' }"> <tr v-for="(body,index) in tableBodyRows" :key="index"> <td v-for="(col, i) in tableBodyCols" :key="col.props + i">{{ body[col.props] }}</td> </tr> </table> </div> </div> </template> <template v-else> <div class="empty-content"> <table cellspacing="0" :style="{ width: (headerData.length - 1) * 100 + 'px', height: '10rem', overflow: 'auto' }" > <thead class="table-header"> <tr> <th v-for="(item,index) in props.headerData" :key="item.title">{{ item.title }}</th> </tr> </thead> <van-empty class="empty-res" description="空空如也！" /> </table> </div> </template> </div> </template> <style lang="scss" scoped> .content-table { box-sizing: border-box; overflow-x: hidden; } table { border-collapse: collapse; margin: 0 auto; width: 100%; border-spacing: 0; font-size: 13px; } th { word-break: break-all; word-wrap: break-word; height: 40px; width: 100px; vertical-align: middle; text-align: center; border-left: 1px solid #999; background: #d9d9d9; box-sizing: border-box; } td { word-break: break-all; word-wrap: break-word; width: 100px; text-align: center; vertical-align: middle; line-height: 30px; border-left: 1px solid #999; box-sizing: border-box; } tr { border-top: 1px solid #999; box-sizing: border-box; } .left-div { width: 100px; float: left; } .left-div1 { width: 100%; } .left-div2 { width: 100%; overflow: hidden; } .left-table2 { margin-bottom: 4px; } .right-div { float: left; width: calc(100vw - 100px); margin-left: -1px; } .right-div1 { width: 100%; overflow: hidden; .first-row-style { box-sizing: border-box; } } .right-div2 { width: 100%; overflow: auto; } .right-table2 { overflow: hidden; } table tr:nth-child(odd) { background: rgba(255, 255, 255, 0.3); } table tr:nth-child(even) { background: rgba(153, 153, 153, 0.3); } .empty-content { width: 100%; overflow: auto; } </style>
上个月自己也用vue3写了个前台的管理系统，有需要的可以看看哦！http://ruoyi-doc.chenliangliang.top/
