前言

这里就懒得说了，直接上代码

组件

<template>
  <view>
    <scroll-view class="container" scroll-x="true" scroll-left="0">
      <view class="table table-border uni-bg-red"
            :style="{width: scrolWidth ? scrolWidth : `auto`}">

        <!--表格头 -->
        <view class="thead">
          <view
              v-for="(headItem, headIndex) in headers"
              :key="headItem"
              :style="{width: headItem.width}"
          >
            <view class="th">
              {{ headItem.label }}
            </view>
            <view class="th-child" v-if="headItem.child">
              {{ headItem.child }}
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true"
                     :style="[{height: height ? height + `rpx`: 'auto'}]"
        >
          <!-- 表格体 -->
          <view class="tbody">
            <block wx:if="{{ data.length > 0 }}"
                   v-for="(item, idx) in data" :key="item"
            >
              <view
                  class="tbody-tr {{ stripe ? 'tbody-tr-stripe' : '' }} {{ border ? 'tbody-tr-border' : ''}} row-class-name">
                <view v-for="(headItem, headIndex) in headers" :key="headItem"
                      class="th cell-class-name"
                      :style="[
                          {color:headers[headIndex].color}
                          ,{lineHeight: trHeight +`rpx`}
                          ,{width: headItem.width}
                ]">
                  {{ item[headItem["prop"]] }}

                </view>
              </view>
            </block>
            <!-- 列表无数据处理 -->
            <block wx:if="{{ data.length === 0 }}">
              <view class="no-data">{{ msg ? msg : '暂无数据' }}</view>
            </block>
          </view>
        </scroll-view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "qw-table",
  components: {},
  data() {
    return {}
  },

  /**
   * 组件的属性列表
   */
  props: {
    data: {
      type: Array,
      value: []
    },
    headers: {
      type: Array,
      value: []
    },
    // table的高度, 溢出可滚动
    height: {
      type: Number,
      value: 'auto'
    },
    trHeight: {
      type: Number,
      value: 'auto'
    },
    scrolWidth: {
      type: String,
      value: '100%'
    },
    // 单元格的宽度
    tdWidth: {
      type: Number,
      value: 35
    },
    // 固定表头 thead达到Header的位置时就应该被fixed了
    offsetTop: {
      type: Number,
      value: 150
    },
    // 是否带有纵向边框
    stripe: {
      type: Boolean,
      value: false
    },
    // 是否带有纵向边框
    border: {
      type: Boolean,
      value: false
    },
    msg: {
      type: String,
      value: '暂无数据~'
    }
  },
  watch: {
    // 在 numberA 或者 numberB 被设置时，执行这个函数
    'headers': function headers(_headers) {
      var reducer = function reducer(accumulator, currentValue) {
        return accumulator + Number(currentValue.width);
      };
      var scrolWidth = _headers.reduce(reducer, 0);

      this.scrolWidth = scrolWidth
    }
  },
  computed: {},
  /**
   * 组件的方法列表
   */
  methods: {
    onRowClick: function onRowClick(e) {
      this.triggerEvent('rowClick', e, e.currentTarget.dataset.it);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  white-space: nowrap;
  width: 100%;
  position: relative;
}

.table {
  display: inline-block;
  font-size: 26px;
  background: #fff;
  border-right: none;
  border-radius: 8px;
  overflow: hidden;

  .thead {
    display: flex;
    justify-content: flex-start;
    overflow: visible;
    color: #333333;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;

    .th {
      color: #333333;
      font-size: 14px;
    }

    .th-child {
      font-size: 11px;
    }
  }

  .tbody {
    justify-content: flex-start;
    overflow: visible;
    box-sizing: border-box;
    font-size: 24px;
    color: #666;
    border: 1px solid #ebeef5;
    border-top: none;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
}


.tbody-tr {
  display: -webkit-box;
  border-bottom: 1px solid #ebeef5;

  .td {
    white-space: nowrap;
    /*border-bottom: 1px solid #ebebeb;*/
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.tbody-tr:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.tbody-tr-stripe {
  background: #fff;
  border-bottom: none;
}

.tbody-tr-stripe:nth-child(2n) {
  background: #F6F6F6;
}

.tbody-tr-border .td {
  border-right: 1px solid #F6F6F6;
}

.tbody-tr-border .td:last-child {
  border-right: none;
}


.no-data {
  display: flex;
  padding: 50px;
  color: #666;
  justify-content: center;
}


</style>

使用

<qw-table bind:rowClick="toDetail"
                :border="table.border"
                :data="table.tableList"
                :headers="table.tableHeader"
                :msg="table.msg"
                :stripe="table.stripe"
                :width="table.width"
                :height="500"
                :trHeight="60">
</qw-table>
      
table: {
        tableHeader: [
          {
            prop: "SHORTNAME",
            label: "股票名称",
            width: '240rpx',
            color: "#55C355"
          }, {
            prop: "NAVCHGRT",
            width: '160rpx',
            label: "估算净值",
            child: '2021-01-10'
          }, {
            prop: "NAV",
            width: '160rpx',
            label: "当日净值",
            child: '2021-01-10'
          }, {
            prop: "GSZ",
            width: '160rpx',
            label: "涨跌幅",
            child: '2021-01-10'
          }, {
            prop: "GSZ",
            width: '160rpx',
            label: "涨跌幅",
            child: '2021-01-10'
          }, {
            prop: "GSZ",
            width: '160rpx',
            label: "涨跌幅",
            child: '2021-01-10'
          }
        ],
        tableList: [
          {
            userId: 100589,
            SHORTNAME: "晓峰",
            NAV: "男",
            ACCNAV: "策划",
            GSZ: "正常",
            NAVCHGRT: "111",
            createTime: "2021-01-10"
          }, {
            userId: 1005599,
            SHORTNAME: "卢小杰",
            NAV: "男",
            ACCNAV: "策划",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-02-05"
          }, {
            userId: 100602,
            SHORTNAME: "曲小梅",
            NAV: "女",
            ACCNAV: "美工",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-02-06"
          }, {
            userId: 100603,
            SHORTNAME: "张坤",
            NAV: "男",
            ACCNAV: "美工",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-02-10"
          }, {
            userId: 100622,
            SHORTNAME: "小苗",
            NAV: "女",
            ACCNAV: "美工",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-03-12"
          }, {
            userId: 100653,
            SHORTNAME: "张志杰",
            NAV: "男",
            ACCNAV: "前端",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-05-12"
          }, {
            userId: 100662,
            SHORTNAME: "东洞",
            NAV: "男",
            ACCNAV: "前端",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-05-06"
          }, {
            userId: 100780,
            SHORTNAME: "李风小",
            NAV: "女",
            ACCNAV: "服务器",
            GSZ: "禁用",
            NAVCHGRT: "111@",
            createTime: "2021-05-30"
          }, {
            userId: 100900,
            SHORTNAME: "张晓风",
            NAV: "男",
            ACCNAV: "服务器",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-06-01"
          }, {
            userId: 101020,
            SHORTNAME: "晒晒",
            NAV: "男",
            ACCNAV: "服务器",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-07-08"
          }, {
            userId: 100900,
            SHORTNAME: "张晓风",
            NAV: "男",
            ACCNAV: "服务器",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-06-01"
          }, {
            userId: 101020,
            SHORTNAME: "晒晒",
            NAV: "男",
            ACCNAV: "服务器",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-07-08"
          }, {
            userId: 100900,
            SHORTNAME: "张晓风",
            NAV: "男",
            ACCNAV: "服务器",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-06-01"
          }, {
            userId: 101020,
            SHORTNAME: "晒晒",
            NAV: "男",
            ACCNAV: "服务器",
            GSZ: "正常",
            NAVCHGRT: "111@",
            createTime: "2021-07-08"
          }
        ],
        stripe: !0,
        border: !1,
        msg: "快去添加我的吧",
      }