Vue 移动端 简易表格 带横纵向滚动条

• 示例图

  
  1634197535(1).jpg

• 代码

 // 原文出处我找不到了 ，自己项目里用过，在此基础上做了修改 ，以下是修改之后的
 // 本人只是为了做个笔记同时也希望能帮助到大家，如有疑问请在评论区留言。

<template>

  <div class="table-container">

    <div id="table">

      <div class="tbHeadFix">

        <div class="theadDiv" id="theadDiv">

          <table cellpadding="0" cellspacing="0">

            <thead>

              <tr>

                <th v-for="(col, index) in column" :key="index" align="center">

                  <div :style="'width:' + handleColumnWidth(col)" class="col">

                    {{ col.key }}

                  </div>

                </th>

              </tr>

            </thead>

          </table>

        </div>

        <div class="tbodyDiv" id="tbodyDiv">

          <table border="0" cellpadding="0" cellspacing="0">

            <tbody>

              <tr v-for="(row, i) in dataSource" :key="i">

                <td v-for="(col, index) in column" :key="index" align="center">

                  <div :style="'width:' + handleColumnWidth(col)" class="col">

                    {{ handleColumn(row[col.key], col.key, col) }}

                  </div>

                </td>

              </tr>

            </tbody>

          </table>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  props: {

    column: { default: () => [] },

    dataSource: { default: () => [] }

  },

  data() {

    return {};

  },

  mounted() {

    document.getElementById("tbodyDiv").onscroll = function(e) {

      document.getElementById("theadDiv").scrollLeft = e.target.scrollLeft;

    };

  },

  methods: {

    handleColumnWidth(col) {

      return col.width ? `${col.width}rem` : "2rem";

    },

    handleColumn(val, key, col) {

      // console.log(val, key, col, "val,key");

      return val;

    },

    // 数字千分位添加逗号

    addCommas(nStr) {

      nStr += "";

      let x = nStr.split(".");

      let x1 = x[0];

      let x2 = x.length > 1 ? "." + x[1] : "";

      let rgx = /(\d+)(\d{3})/;

      while (rgx.test(x1)) {

        x1 = x1.replace(rgx, "$1" + "," + "$2");

      }

      return x1 + x2;

    }

  }

};

</script>

<style scoped lang="less">

.table-container {

  position: relative;

  width: 100%;

  height: 100%;

  background-color: #fff;

  #table {

    width: 100%;

    height: 245px;

    border: 1px solid #ccc;

  }
}
.tbHeadFix {

  height: 100%;

  font-size: 13px;

  .theadDiv {

    display: flex;

    align-items: center;

    width: 100%;

    height: 46px;

    overflow: hidden;

    background-color: #f1f1f1;

    table {

    }

  }

  .tbodyDiv {

    width: 100%;

    height: 198px;

    overflow: auto;

    table {

    }

  }

}

table {

  height: 100%;

  thead {

    tr {

      th {

        height: 45px;

        border-right: 1px solid #ccc;

        border-bottom: 1px solid #ccc;

        .col {

          padding: 5px 5px;

          box-sizing: border-box;

        }

      }

    }

  }

  tbody {

    tr {

      td {

        border-bottom: 1px solid #ccc;

        border-right: 1px solid #ccc;

        .col {

          padding: 10px 5px;

          box-sizing: border-box;

        }

      }

    }

  }

}

</style>