分享一个自己封装的微信小程序表格组件

1614929271(1).jpg

1614930765(1).jpg

主要是在wxml中处理的
参考的jeecg boot vue 的 表头json数据格式

customTable.html
//wxs用来处理日期格式的
<wxs module="m1">
  var changeDataStr = function(str) {
    var dataStr=''
    dataStr=str.slice(5)
    return dataStr
  }
  module.exports.changeDataStr = changeDataStr;
</wxs>
<block >
  <view class="flex thBox {{isBz?'bz':''}}" style="width:{{maxWidth}};">
    <view class="thBoxItem " wx:for="{{thdata}}" style="width:{{item.width}}">
      <text class="ml25 ellipsis">{{item.title}}</text>
    </view>
  </view>
  <view class="flex trBox {{isBz?'bz':''}}" style="width:{{maxWidth}}">
    <block wx:for="{{trKeyArr}}" wx:for-item="keyItem" >
      <view class="flex f-column"  style="width:{{keyItem.width}}">
        <view wx:for="{{trdata}}" wx:for-item="item">
          <view class="trBoxItem ellipsis" >
              <block wx:if="{{[keyItem.key]=='date'}}">
                <text class="ml25">{{(m1.changeDataStr(item[keyItem.key]))}}</text>
              </block>
              <block wx:else>
                <text class="ml25">{{item[keyItem.key]}}</text>
              </block>
          </view>
        </view>
      </view>
    </block>
  </view>
</block>

//customTable.js
Component({
  /**
   * 组件的属性列表
   */
  options: {
    addGlobalClass: true
  },
  properties: {
    thdata: {
      type: Array,
      value: [],
      observer(newVal) {
        if (!!newVal) {}
      }
    },
    trdata: {
      type: Array,
      value: [],
      observer(newVal) {
        if (!!newVal) {
          console.log('表单数据', newVal);
          this.processData()
        }
      }
    },
    isBz: {
      type: Boolean,
      value: false,
    },
    maxWidth: {
      type: String,
      value: '100%',
    }
  },
  /**
   * 组件的初始数据
   */
  data: {},
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    processData() {
      let thdata = this.properties.thdata
      let trdata = this.properties.trdata
      let trKeyArr = []
      thdata.forEach(item => {
        trKeyArr.push({
          key: item.dataIndex,
          width: item.width
        })
      
      });
      this.setData({
        trKeyArr,
      })
      // console.log('thdata',thdata);
      // console.log('trdata',trdata);
      // console.log('trKeyArr',trKeyArr);
    }
  },
  pageLifetimes: {
    show: function () {
      // 页面被展示
      this.processData()
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  }
})

/* components/customTable/customTable.wxss */
.thBox {
  padding: 0 30rpx;
  overflow-y: scroll;
}
.trBox {
  padding: 0 30rpx;
  overflow-y: scroll;
}

.thBoxItem,
.trBoxItem {
  height: 74rpx;
  line-height: 74rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #666666;
  border: 1rpx solid #eff2f2;
  text-align: center;
}
.thBoxItem {
  border-top: null;
  background: #f7faff;
}
.trBoxItem {
  border-top: null;
  background: #fff;
}
.bz {
  box-sizing: border-box;
}
/* 溢出显示省略号 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex {
  display: flex;
}
.f-column{
  flex-direction: column;
}

使用组件

    <view style="width:100%;overflow: scroll;margin-bottom:50rpx">
        <customTable id="orderTable" maxWidth="{{tableMaxWidth}}" isBz="{{false}}" thdata="{{tableColumns}}"
        trdata="{{tableData}}"></customTable>
      </view>

//js
  data:{
    //默认数据
      tableColumns: [{
        title: '日期',
        align: 'left',
        dataIndex: 'data',
        width: '20%',
      },
      {
        title: '五金',
        align: 'left',
        dataIndex: 'orderSum',
        width: '16%',
      },
      {
        title: '橱柜',
        align: 'left',
        dataIndex: 'orderSum',
        width: '16%',
      },
      {
        title: '衣柜',
        align: 'left',
        dataIndex: 'paySum',
        width: '16%',
      },
      {
        title: '样板',
        align: 'left',
        dataIndex: 'paySum',
        width: '16%',
      },
      {
        title: '定制',
        align: 'left',
        dataIndex: 'paySum',
        width: '16%',
      }
    ],
    tableData: [{
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 12212,
        paySum: 54,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 12212,
        paySum: 54,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      },
      {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 12212,
        paySum: 54,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 12212,
        paySum: 54,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 12212,
        paySum: 54,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }, {
        data: '10.21',
        orderSum: 12212,
        paySum: 54,
      }, {
        data: '10.21',
        orderSum: 122,
        paySum: 55,
      }
    ]
}

onLoad: function (options) {
    //通过接口获取数据
    getordeCountInfoData().then(res => {
      console.log('res', res);
      res = res.data
      if (res.code == 200) {
        let tableColumns = [{
          title: '日期',
          align: 'left',
          dataIndex: 'date',
          width: '20%',
        }, ]
        let tableData = []
        let len = res.result.productlist.length
        //计算每个item的百分比宽度
        let itemWidth = (0.8 / len).toFixed(2) * 100 + '%'
        res.result.productlist.forEach(item => {
          tableColumns.push({
            title: item.productName,
            align: 'left',
            dataIndex: 'orderSum',
            width: itemWidth,
          }, )
          item.numAndDate.forEach(item => {
            tableData.push({
              date: item.date,
              //orderSum对应tableData的orderSum，自定义组件中是根据这个key对应渲染的  上下对应即可   
               orderSum: item.num,
            })
          })
          this.setData({
            tableColumns,
            tableData
          })
        });
      }
    })
  }