js实现移动端简易滑动表格

本文实例为大家分享了js实现移动端简易滑动表格的具体代码，供大家参考，具体内容如下

上js文件代码

<template>
  <view>
    <scroll-view scroll-x="true" class="scroll-table">
      <view class="scroll-tr">
        <view class="cus-tr cus-th" style="background: #fff">
          <view class="cus-td" v-for="(item, i) in thList" :key="i">{{
            item
          }}</view>
        </view>
        <!-- 这里会自动遍历出对象数组中的数据 -->
        <view v-if="!useCusTdList">
          <view class="cus-tr" v-for="(item, n) in tdData" :key="n">
            <view class="cus-td" v-for="(val, key, i) in item" :key="i + n">{{
              val
            }}</view>
          </view>
        </view>
        <!-- 这里会使用tdList中定义的字段的数据 -->
        <view v-if="useCusTdList">
          <view class="cus-tr" v-for="(item, n) in tdData" :key="n">
            <view class="cus-td" v-for="(tdName, i) in tdList" :key="i + n">
              <view v-if="!slotData">{{ item[tdName] }}</view>
              <view v-else>
                <slot
                  name="scoped"
                  :row="{ value: item[tdName], key: tdName }"
                ></slot>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 撑开空间，防止最后一行的下边框无法显示 -->
      <view style="height: 2rpx"></view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name: 'CusTable',
    props: {
      thList: {
        type: Array,
        default: function () {
          return []
        }
      },
      tdList: {
        type: Array,
        default: function () {
          return []
        }
      },
      tdData: {
        type: Array,
        default: function () {
          return []
        }
      },
      useCusTdList: {
        useCusTdList: Boolean,
        default: false
      },
      slotData: { //是否使用插槽
        useCusTdList: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    methods: {}
  }
</script>

<style lang="scss">
  /*scroll-view样式*/
  .scroll-table {
    min-height: 100rpx;
    white-space: nowrap;
    // padding: 10rpx 20rpx;
    // margin-top: 30rpx;
    padding-bottom: 60rpx;

    .scroll-tr {
      min-width: 750rpx;
      display: inline-block;

      /*表头样式*/
      .cus-th {
        background-color: #f3f3f3;
      }

      /*行样式*/
      .cus-tr {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: center;
        height: 100%;

        /*设置边框*/
        border-color: #ccc;
        border-style: solid;
        border-width: 0;
        border-top-width: 1px;
        border-left-width: 1px;
        border-bottom-width: 1px;
        color: #333;

        + .cus-tr {
          border-top-style: none;
        }

        /*表格样式*/
        .cus-td {
          width: 220rpx;
          box-sizing: border-box;
          padding: 1px;
          font-size: 25rpx;
          word-break: break-all;
          border-color: #ccc;
          border-style: solid;
          border-width: 0;
          border-right-width: 1px;
          min-height: 60rpx;
          white-space: pre-wrap;
          word-wrap: break-word;

          /**/
          display: flex;
          justify-content: center; //左右居中
          align-items: center; //上下居中

          /* 跨列 */
          &-colspan {
            flex-grow: 1;
            width: 0;
          }

          /* 内容顶部对齐 */
          &-top {
            align-items: flex-start;
            align-content: flex-start;
          }
          /* 内容底部对齐 */
          &-bottom {
            align-items: flex-end;
            align-content: flex-end;
          }
          /* 内容左边对齐 */
          &-left {
            justify-content: flex-start;
          }
          /* 内容右边对齐 */
          &-right {
            justify-content: flex-end;
          }
        }
      }
    }
  }
</style>

使用方式

<tableS
   :thList="thList"
   :tdList="tdList"
   :tdData="tdData"
   :useCusTdList="false" //控制是否更具对应字段赋值
 />

// 或者使用插槽


     <tableS
       :thList="thList"
       :tdList="tdList"
       :tdData="dataList"
       :useCusTdList="true"
       :slotData="true"
     >
       <!-- 加插槽 -->
       <template v-slot:scoped="{ row }">
         <view v-if="row.key === 'jiage'">-</view>
         <view v-else>{{ row.value }}</view>
       </template>
     </tableS>
  

 thList: ['姓名', '年龄', '性别', '性别', '性别'], //表头
 tdList: ['name', 'age', 'sex'], //自定义属性名(要把useCusTdList变成true 如果为false  就是按数组顺序赋值)
 tdData: [{ name: '张三', age: '18', sex: '男' }],

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。