微信小程序做表格

千次阅读 多人点赞

2020-10-22 17:16:22

效果

    1. 左图是多列并且给了最大高度的效果。
    2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果。
    3. 在不为某列设置固定宽度的情况下，四列及四列以下均是平分屏幕宽度的，并且不能左右滑动。

属性

属性	类型	默认值	必填	说明
tabData	Array	[ ]	否	数据源
columns	Array	[ ]	是	数据列
setting	Object	{ }	否	自定义样式配置项

columns

属性	类型	默认值	必填	说明
label	String		是	表格标题
prop	Array		是	表格中需要展示的数据列
onclick	Boolean	false	否	为某一列设置点击事件，若同时为多列设置了点击事件，则只有第一个生效
fontSize	Number	24	否	某一列的字体大小，单位：rpx
fontWeight	Number / String	normal	否	某一列的字重（粗细），支持 css 的所有属性值
textDecoration	String	none	否	某一列的文本修饰，支持 css 的所有属性值
color	String		否	某一列的字体颜色，支持十六进制、RGB、RGBA、英文单词

setting

属性	类型	默认值	必填	说明
tableOutBorder	String		否	表格外边框，支持三值写法，例如：2rpx solid #ebeef5
tableInBorder	String		否	表格内边框，支持三值写法，例如：2rpx solid #ebeef5
tableInBorderLevel	Boolean	false	否	表格内是否只显示水平边框
tableRadius	String		否	表格圆角
theadHeight	String		否	表格标题的高度
theadAlign	String	left	否	表格标题的字体对齐方式，值：left、center、right
theadColor	String		否	表格标题的字体颜色，支持十六进制、英文单词
theadBgColor	String		否	表格标题的背景颜色，支持十六进制、RGB、RGBA、英文单词
theadFontSize	Number	24	否	表格标题的字体大小，单位：rpx
theadFontWeight	Number / String	bold	否	表格标题的字重（粗细），支持 css 的所有属性值
tbodyHeight	String		否	表格体的高度, 用于垂直滚动
tbodyAlign	String	left	否	表格体的字体对齐方式，值：left、center、right
tbodyColor	String		否	表格体的的字体颜色，支持十六进制、英文单词
tbodyBgColor	String		否	表格体的背景颜色，支持十六进制、RGB、RGBA、英文单词
tbodyFontSize	Number	24	否	表格体的字体大小，单位：rpx
tbodyFontWeight	Number / String	normal	否	表格体的字重（粗细），支持 css 的所有属性值
trHeight	String		否	表格体的行的高度
stripe	String		否	表格体的斑马纹背景色，支持十六进制、RGB、RGBA、英文单词

子组件WXML

<wxs src="./index.wxs" module="filter" />
<view class="container">
  <view class="table"
        style="width:{{headWidth}};border-radius: {{config.tableRadius}}rpx;border:{{config.tableOutBorder}};border-bottom:{{config.tableOutBorder=='none'?(!!config.tableInBorder?config.tableInBorder:'2rpx solid #ebeef5'):''}};">
    <view class="thead" style="min-height:{{config.theadHeight}}rpx;background:{{config.theadBgColor}};">
      <view class="th"
            wx:for="{{column}}"
            wx:key="index"
            style="flex-grow:0;flex-basis:{{headWidth=='100%'?(100/column.length)+'%':item.width+'rpx'}};color:{{config.theadColor}};font-size:{{config.theadFontSize}}rpx;font-weight:{{config.theadFontWeight}};border-right:{{index==(column.length - 1)?'none':(config.tableInBorderLevel?'none':config.tableInBorder)}};border-bottom:{{config.tableInBorder}};">
        <view class="txt" style="text-align:{{config.theadAlign}};">{{item.label}}</view>
      </view>
    </view>
    <scroll-view scroll-y wx:if="{{tabData.length > 0}}" style="max-height:{{config.tbodyHeight}}rpx;">
      <view class="tr"
            wx:for="{{tabData}}"
            wx:for-item="item"
            wx:key="index"
            style="min-height:{{config.trHeight}}rpx;background:{{config.tbodyBgColor}};">
        <view class="td"
              wx:for="{{column}}"
              wx:for-item="col"
              wx:for-index="colIndex"
              wx:key="colIndex"
              style="flex-grow:0;flex-basis:{{headWidth=='100%'?(100/column.length)+'%':col.width+'rpx'}};background:{{index%2!=0?config.stripe:''}};color:{{config.tbodyColor}};font-size:{{config.tbodyFontSize}}rpx;font-weight:{{config.tbodyFontWeight}};border-right:{{colIndex==(column.length - 1)?'none':(config.tableInBorderLevel?'none':config.tableInBorder)}};border-bottom:{{index==tabData.length-1?'none':config.tableInBorder}};">
          <view class="txt"
          		data-value="{{item}}"
                bindtap="{{(col.οnclick==true||col.οnclick=='true')?'btnAction':''}}"
          		style="text-align:{{config.tbodyAlign}};font-size:{{col.fontSize}}rpx;font-weight:{{col.fontWeight}};text-decoration:{{col.textDecoration}};color:{{col.color}};">
            <block wx:if="{{!!col.type}}">{{filter[col.type](item[col.prop], col.param)}}</block>
            <block wx:else>{{item[col.prop]}}</block>
          </view>
        </view>
      </view>
    </scroll-view>
    <view wx:if="{{tabData.length === 0}}" class="msg">
      <view>暂无数据~</view>
    </view>
  </view>
</view>

子组件JS

Component({
  data: {
    headWidth: null, // 设置表格的整体宽度，用于水平滚动
    column: [], // 表头标题
    config: { // 表格自定义样式设置
      tableOutBorder: '', // 表格的表框
      tableInBorder: '', // 表格的表框
      tableInBorderLevel: false, // 表格内只显示水平边框
      tableRadius: '', // 表格圆角
      theadHeight: '', // 表头的高度
      theadAlign: '', // 表头的字体对齐
      theadColor: '', // 表头的字体颜色
      theadBgColor: '', // 表头的背景色
      theadFontSize: '', // 表头的字体大小
      theadFontWeight: '', // 表头的字体粗细
      tbodyHeight: '', // 表格 tbody 的高度, 用于垂直滚动
      tbodyAlign: '', // 表格行的字体对齐方式
      tbodyColor: '', // 表格行的字体颜色
      tbodyBgColor: '', // 表格行的背景色
      tbodyFontSize: '', // 表格行的字体大小
      tbodyFontWeight: '', // 表格行的字体粗细
      trHeight: '', // 表格行 tr 的高度
      stripe: '' // 表格的斑马纹背景色
    }
  },
  properties: {
    tabData: { // 父组件传入的表格数据
      type: Array,
      value: []
    },
    columns: { // 父组件传入的表头标题
      type: Array,
      value: []
    },
    setting: { // 父组件传入的表格自定义样式
      type: Object,
      value: {}
    }
  },
  observers: {
    'tabData'(val) {
      // console.log('tableData', val)
    },
    'columns'(val) {
      if(val.length !== 0) {
        let width = 0
        let num = 0
        val.forEach((item)=>{
          // 判断是否设置了列宽，没有的话赋值默认的宽度 186，单位rpx
          if(!!item.width) {
            width += item.width/1
          } else {
            item.width = 186
            width = width + 186
          }
          // 如果给多列添加了点击事件，则第一个绑定了点击事件的列生效
          if(!!item.onclick && (item.onclick == true || item.onclick == 'true')) {
            num++
            if(num > 1) {
              item.onclick = false
            }
          }
        })
        // 判断table的宽度是否超出屏幕的宽度，超出则赋值固定的宽度，否则赋值百分比
        if(width < 750) {
          width = '100%'
        } else {
          width = width + 'rpx'
        }
        this.setData({
          column: val,
          headWidth: width
        })
      }
    },
    'setting'(val) {
      // 判断传入的表格设置项是否为空
      if (Object.keys(val).length !== 0) {
        for (let key in val) {
          let str = null
          if(key == 'tableInBorderLevel' && (val[key] == true || val[key] == 'true')) {
            str = true
          } else if(key == 'tableInBorderLevel') {
            str = false
          } else {
            str = String(val[key]).replace(/(^\s*)|(\s*$)/g, '')
          }
          if(str != '' && str != null && str != 'null' && str != undefined && str != 'undefined') {
            this.data.config[key] = str
          }
        }
        this.setData({
          config: this.data.config
        })
      }
    }
  },
  methods: {
    // 表格某行的点击事件
    btnAction: function(e) {
      let value = e.currentTarget.dataset.value // value：一个包含点击行所有数据的对象
      this.triggerEvent("getCurrentValue", value)
    }
  }
})

子组件WXS

内含格式化时间、价格、百分比的方法

// 格式化时间
function time(val, option) {
  var date = getDate(val)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var week = date.getDay()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  
  //获取 年月日
  if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')

  //获取 年月
  if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')

  //获取 年
  if (option == 'YY') return [year].map(formatNumber).toString()

  //获取 月
  if (option == 'MM') return  [mont].map(formatNumber).toString()

  //获取 日
  if (option == 'DD') return [day].map(formatNumber).toString()

  //获取 年月日 周一 至 周日
  if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 月日 周一 至 周日
  if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 周一 至 周日
  if (option == 'Week')  return getWeek(week)

  //获取 时分秒
  if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

  //获取 时分
  if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

  //获取 分秒
  if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

  //获取 时
  if (option == 'hh')  return [hour].map(formatNumber).toString()

  //获取 分
  if (option == 'mm')  return [minute].map(formatNumber).toString()

  //获取 秒
  if (option == 'ss') return [second].map(formatNumber).toString()

  //默认 年月日 时分秒 
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

function getWeek(n) {
  switch(n) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 7:
      return '星期日'
  }
}
// 格式化价格
function price(val, option) {
  var option = option || 0
   // 不是数字返回空
   if(val != null && val != '' && isNaN(val/1)) {
    return ''
  }
  if(!!val && val != 'null' && val != 'undefined') {
    return val.toFixed(option)
  }
  return ''
}
// 格式化百分比
function percent(val) {
  // 不是数字返回空
  if(val != null && val != '' && isNaN(val/1)) {
    return ''
  }
  // 如果值小于万分位（小于 0.01%）则返回 0%
  if(val < 0.0001) {
    return '0%'
  }
  // 小数 *100 后不包含小数点，返回 *100 后的结果
  if(val >= 0.0001 && ((val * 100) + '').indexOf('.') == -1) {
    return (val * 100) + '%'
  }
  // 有些小数 *100 之后会出现很长的位数，比如0.07*100=0.000000000001
  // 先处理成数组再截取 arr[1] 的前两个字符判断是否等于0，等于 0 返回 arr[0]，不等于 0 则保留两位小数
  if(val >= 0.0001 && ((val * 100) + '').indexOf('.') > -1) {
    if((val * 100 + '').split('.')[1].slice(0,2) == 0){
      return (val * 100 + '').split('.')[0] + '%'
    }
    return (val * 100).toFixed(2) / 1 + '%'
  }
}

module.exports.time = time;
module.exports.price = price;
module.exports.percent = percent;

子组件JSON

{
  "component": true
}

子组件WXSS

.container {
  overflow-x: scroll;
}
.table {
  border: 2rpx solid #ebeef5;
  border-bottom: 2rpx solid #ebeef5;
  border-radius: 0;
  box-sizing: border-box;
  background: #fff;
  font-size: 24rpx;
  color: #606266;
  overflow: hidden;
}
/* 表头 */
.thead {
  display: flex;
}
.th {
  padding: 10rpx 20rpx;
  border-right: 2rpx solid #ebeef5;
  border-bottom: 2rpx solid #ebeef5;
  display: flex;
  align-items: center;
}
.th .txt {
  font-weight: bold;
  text-align: left;
}
.tr {
  display: flex;
}
.td {
  padding: 10rpx 20rpx;
  border-right: 2rpx solid #ebeef5;
  border-bottom: 2rpx solid #ebeef5;
  display: flex;
  align-items: center;
}
.td .txt {
  text-align: left;
  font-weight: normal;
}
.msg {
  width: 750rpx;
  height: 240rpx;
  line-height: 240rpx;
  font-size: 26rpx;
  text-align: center;
}
/* 隐藏表格滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

父组件WXML

<view class="container">
  <view class="table">
    <table tabData="{{tabData}}"
    	   columns="{{columns}}"
    	   setting="{{setting}}"
    	   bind:getCurrentValue="getCurrentValue">
     </table>
  </view>
</view>

父组件JS

Page({
  data: {
    // 表格数据
    tabData: [
      { 
        id: 1,
        name: '上官婉儿',
        location: '法师 / 刺客',
        specialty: '爆发 / 突进',
        skill: '笔阵 / 篆法·疾势 / 飞白·藏锋 / 章草·横鳞',
        price: 13888,
        showUpRate: 0.001,
        shelveTime: 1545062400000
      },
      {
        id: 2,
        name: '王昭君',
        location: '法师',
        specialty: '控制 / 冰冻',
        skill: '冰封之心 / 凋零冰晶 / 禁锢寒霜 / 凛冬已至',
        price: 8888,
        showUpRate: 0.01,
        shelveTime: 1445270400000
      },
      { 
        id: 3,
        name: '老夫子',
        location: '战士',
        specialty: '突进',
        skill: '师道尊严 / 圣人训诫 / 举一反三 / 圣人之威',
        price: 8888,
        showUpRate: 0.0003,
        shelveTime: 1445270400000
      },
      { 
        id: 4,
        name: '狄仁杰',
        location: '射手',
        specialty: '',
        skill: '迅捷 / 六令追凶 / 逃脱 / 王朝密令',
        price: 8888,
        showUpRate: 0.06,
        shelveTime: 1445270400000
      },
      { 
        id: 5,
        name: '墨子',
        location: '法师 / 战士',
        specialty: '控制 / 护盾',
        skill: '兼爱非攻 / 和平漫步 / 机关重炮  /墨守成规',
        price: 8888,
        showUpRate: 0.005,
        shelveTime: 1445270400000
      },
      { 
        id: 6,
        name: '盘古',
        location: '战士',
        specialty: '突进 / 收割',
        skill: '盘古斧 / 狂怒突袭 / 压制之握 / 开天辟地 / 聚合为一',
        price: 13888,
        showUpRate: 0.00001,
        shelveTime: 1550764800000
      },
      { 
        id: 7,
        name: '猪八戒',
        location: '坦克',
        specialty: '团控 / 回复',
        skill: '毫发无伤 / 肉弹蹦床 / 倒打一耙 / 圈养时刻',
        price: 13888,
        showUpRate: 0.4,
        shelveTime: 1548777600000
      },
      { 
        id: 8,
        name: '伽罗',
        location: '射手',
        specialty: '远程消耗 / 团队',
        skill: '破魔之箭 / 渡灵之箭 / 静默之箭 / 纯净之域',
        price: 13888,
        showUpRate: 0.8,
        shelveTime: 1537977600000
      },
      {
        id: 9,
        name: '李信',
        location: '战士',
        specialty: '突进 / 团控',
        skill: '灰暗利刃 / 急速突进 / 强力斩击 / 力量觉醒·光 / 力量觉醒·暗',
        price: 13888,
        showUpRate: 0.07,
        shelveTime: 1542816000000
      },
      { 
        id: 10,
        name: '云中君',
        location: '刺客 / 战士',
        specialty: '突进 / 收割',
        skill: '云间游 / 天隙鸣 / 若英·华彩 / 风雷引',
        price: 13888,
        showUpRate: 0.006,
        shelveTime: 1557504000000
      },
      { 
        id: 11,
        name: '瑶',
        location: '辅助',
        specialty: '团队增益',
        skill: '山鬼·白鹿 / 若有人兮 / 风飒木萧 / 独立兮山之上',
        price: 13888,
        showUpRate: 0.9,
        shelveTime: 1555344000000
      },
      {
        id: 12,
        name: '米莱狄',
        location: '法师',
        specialty: '持续输出 / 推进',
        skill: '机械仆从 / 空中力量 / 强制入侵 / 浩劫磁场',
        price: 13888,
        showUpRate: 0.8,
        shelveTime: 1526313600000
      },
      { 
        id: 13,
        name: '狂铁',
        location: '战士',
        specialty: '突进 / 团控',
        skill: '无畏战车 / 碎裂之刃 / 强袭风暴 / 力场压制',
        price: 13888,
        showUpRate: 0.09,
        shelveTime: 1524153600000
      },
      { 
        id: 14,
        name: '斐擒虎',
        location: '刺客 / 战士',
        specialty: '远程消耗 / 收割',
        skill: '寸劲 / 冲拳式 / 气守式 / 虎啸风生',
        price: 13888,
        showUpRate: 0.007,
        shelveTime: 1519747200000
      },
      { 
        id: 15,
        name: '明世隐',
        location: '辅助',
        specialty: '团队增益',
        skill: '大吉大利 / 临卦·无忧 / 师卦·飞翼 / 泰卦·长生',
        price: 13888,
        showUpRate: 0.06,
        shelveTime: 1513094400000
      }
    ],
    // 表格标题列
    columns: [
      { label: '英雄名称', prop: 'name', onclick: true, fontSize: '',fontWeight: 600, textDecoration: 'underline', color: '#000'},
      { label: '英雄定位', prop: 'location'},
      { label: '英雄特长', prop: 'specialty'},
      { label: '英雄技能', prop: 'skill', width: 700, fontSize: '', fontWeight: 400, textDecoration: '', color: ''},
      { label: '英雄价格', prop: 'price', type: 'price'},
      { label: '出场率', prop: 'showUpRate', type: 'percent'},
      { label: '上架时间', prop: 'shelveTime', type: 'time', param: 'YY-MM-DD'}
    ],
    // 自定义样式配置项
    setting: {
      tableRadius: 0, // 表格圆角
      tableOutBorder: '', // 表格外边框
      tableInBorder: '', // 表格内边框
      tableInBorderLevel: 'true', // 表格内只显示水平边框
      theadHeight: 70, // 表头的高度
      theadAlign: '', // 表头的字体对齐方式
      theadColor: '', // 表头的字体颜色
      theadBgColor: '', // 表头的背景色
      theadFontSize: '', // 表头的字体大小
      theadFontWeight: '', // 表头的字体粗细
      tbodyHeight: '600',  // 表格 tbody 的高度, 用于垂直滚动
      tbodyAlign: '', // 表格行的的字体对齐方式
      tbodyColor: '', // 表格行的字体颜色
      tbodyBgColor: '', // 表格行的背景色
      tbodyFontSize: '', // 表格行的字体大小
      tbodyFontWeight: '', // 表格行的字体粗细
      trHeight: 70, // 表格行 tr 的高度
      stripe: '#fdf5e6' // #fafafa #f5f5f5 #fdf5e6 #fff8dc #f0f9eb
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
  // 表格的自定义点击事件
  getCurrentValue(e) {
    const { name } = e.detail
    wx.showToast({
      title: name,
      icon: 'none',
      duration: 1500
    })
  }
})

父组件JSON

{
  "navigationBarTitleText": "搜索",
  "usingComponents": {
    "table": "../../components/table/index"
  }
}

父组件WXSS

page {
  background: #fff;
}
.container {
  width: 100%;
}
.table {
  width: 100%;
  margin: 0 auto 30rpx;
}

table

更多相关内容

钉钉Weex微应用与微信小程序对比表格
2021-03-29 18:06:02

微信小程序 通过webpack打包构建成一个纯JavaScript文件，需要开发者自己写打包脚本，非常灵活。通过IDE打包，打包路径是一个黑盒，不需要开发者写打包脚本，必须按照它的规则书写入口以及业务代码。代码包无限制...

收起

应用
微信小程序制作表格的方法
2021-01-03 09:10:54

本文实例为大家分享了微信小程序制作表格的具体代码。 微信小程序中没有专门的表格制作工具，不过使用列表渲染可以实现，下面是我做的表格图片：方法如下：在XXX.wxml中填写下面的代码参数内容 [code...

收起
微信小程序开发表格demo
2019-03-08 13:34:25

小程序开发表格demo，### wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

收起
微信小程序实现简易table表格
2020-10-17 10:15:25

主要为大家详细介绍了微信小程序实现简易table表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
微信小程序 表格
2021-01-27 09:48:31

mini-program-table微信小程序表格实现功能:�固定表头固定表格中首列内容可滚动列宽自适应

收起
微信小程序实现的绘制table表格功能示例
2021-01-19 15:54:26

本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考，具体如下：表格的绘制 js Page({ data:{ infeed:[', 1周, 2周, 3周, 总计], endwise1: 游泳, tb1:0, tb2:0, tb3:0, tb4:0, endwise2: ...

收起
微信小程序自定义组件 - 表格组件来啦
2021-03-29 16:57:21

针对上期打卡需求开发，这期需要以列表的形式展现打卡记录，但是微信小程序并没有表格组件，可能是官方考虑到,在前端开发中，表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用，针对这个问题，...

收起

自定义
微信小程序把页面做成图片分享【原创】
2021-03-29 17:43:01

开发微信小程序的时候，经常要遇到如上图这样的，保存小程序二维码图片的分享功能。网上找了很多都没有具体的写法，于是自己看官方文档写了一个，分享一下。首先，需要在 wxml 中创建一个画板 canvas 。 wxml : ...

收起

微信小程序(5)——如何制作好看的表格

千次阅读 多人点赞 2022-02-08 10:56:18

关键词：从“html的table”到 “微信小程序的table”、统一格式的表格、非统一格式的表格、对表格的点击操作、对表格的“增、删、改”操作。

✅ 因为 “表格” 在日常统计中无处不在，所以今天来做一做。但是微信小程序不支持 table 标签，我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。

微信小程序开发 🌲

上一篇文章链接: 微信小程序学习笔记④——Flex布局[实战样例之画骰子]

下一篇文章链接: 🚧 🚧 …

一、从“html的table”到 “微信小程序的table”

● HTML 表格：表格由 <table></table> 标签来定义。

● HTML 表格中的行：每个表格均有若干行，由 <tr></tr> 标签定义。（tr 是 table row 的缩写）

● HTML 表格中的行中的单元格：每行被分割为若干单元格，由 <td></td> 标签定义。（td 是 table data 的缩写）

● HTML 表格中的表头：即表格第一行的若干单元格(一般表格的第一行是一些 “项目名”)，由 <th></th>标签进行定义。（th 是 table head 的缩写）

◆ 补充说明：“<td></td>” 中所装的东西，即是数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

● html 的 table 样例：

<table border="1" style="width:200px; text-align: center;">
    <tr>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>特朗普</td>
        <td>川普</td>
    </tr>
    <tr>
        <td>小w</td>
        <td>看足球</td>
    </tr>
</table>

● 在浏览器中显示结果如下：

在这里插入图片描述

● 如果将上述在代码放在微信小程序中显示结果如下：

在这里插入图片描述

● 这说明微信小程序不支持 table 组件。虽然不支持，但是我后面还是会沿用 “table、tr、th、td” 这些已经耳熟能详的标签名，只不过这些名词变成了 “样式名”。

二、统一格式的表格

● “统一格式” 的意思是：表格里面的 “表头” 中的每一个『单元格』的大小和样式一模一样，并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式一模一样。

● 我去官网找了部分 “2021年的博客之星” 来作为本次制作的表格的内容，其 “统一格式的表格框架” 如下：

● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<view class="table">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th">排名</view>
        <view class="th">用户昵称</view>
        <view class="th">技术领域</view>
        <view class="th">博主简介</view>
    
    </view>
    <!-- 表格第二行 -->
    <view class="tr">
        <view class="td">1</view>
        <view class="td">英雄哪里出来</view>
        <view class="td">人工智能与算法</view>
        <view class="td">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好，会用余生致力于将算法写得清晰、讲得明白。</view>
    </view>

    <!-- 表格第三行 -->
    <view class="tr">
        <view class="td">2</view>
        <view class="td">哪吒</view>
        <view class="td">后端开发</view>
        <view class="td">CSDN新星计划导师，博客专家，哪吒社区维护者，公众号【哪吒编程】维护者，专注Java干货分享。</view>
    </view>
    
    <!-- 表格第四行 -->
    <view class="tr">
        <view class="td">3</view>
        <view class="td">_陈哈哈</view>
        <view class="td">全栈开发</view>
        <view class="td">陈士杰，幽默爱笑的程序员，北漂五年。文章坚持“以用为本”，...。人生有味是清欢，我有故事，你有酒么？</view>
    </view>
</view>

● WXSS 代码：


.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    display: flex;
    flex-direction: row;
}

.th, .td {  /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    width: 25%;					/* 4个25%相加刚好100% */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th {
    font-weight: 800;           /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td {
    background-color:#edf3e9;   /* 背景色 */
}

● 运行结果：
在这里插入图片描述
● “统一格式” 就体现在：“表头”都一样大，除“表头”外的单元格也是一样大。虽然这样编写代码很方便，但是这样会让屏幕感觉 “局部拥挤”，我们可能更希望，内容少的那一列的单元格有自己独立的样式。这样可能看上去 “松弛有度” 一点。

三、非统一格式的表格

● “非统一格式” 的意思是：表格里面的 “表头” 中的每一个『单元格』的大小和样式可能不一样，并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式可能不一样。但是，表格中每一列的 “宽度” 一样。

● 为了实现 “松弛有度”，我们还需要用到『滚动视图组件(scroll-view)』，用它来实现：左右拖动表格的功能。

● 这是它的官方文档：『滚动视图组件(scroll-view)』，我们只需要在标签中把 scroll-x 属性设置为 true 即可。

● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<scroll-view class="table" scroll-x="true">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th_1">排名</view>
        <view class="th_2">用户昵称</view>
        <view class="th_3">技术领域</view>
        <view class="th_4">博主简介</view>
    
    </view>
    <!-- 表格第二行 -->
    <view class="tr">
        <view class="td_1">1</view>
        <view class="td_2">英雄哪里出来</view>
        <view class="td_3">人工智能与算法</view>
        <view class="td_4">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好，会用余生致力于将算法写得清晰、讲得明白。</view>
    </view>

    <!-- 表格第三行 -->
    <view class="tr">
        <view class="td_1">2</view>
        <view class="td_2">哪吒</view>
        <view class="td_3">后端开发</view>
        <view class="td_4">CSDN新星计划导师，博客专家，哪吒社区维护者，公众号【哪吒编程】维护者，专注Java干货分享。</view>
    </view>
    
    <!-- 表格第四行 -->
    <view class="tr">
        <view class="td_1">3</view>
        <view class="td_2">_陈哈哈</view>
        <view class="td_3">全栈开发</view>
        <view class="td_4">陈士杰，幽默爱笑的程序员，北漂五年。文章坚持“以用为本”，...。人生有味是清欢，我有故事，你有酒么？</view>
    </view>
</scroll-view>

● WXSS 代码：

.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    width: 150%;    /* 15% + 25% + 25% + 85% = 150%*/
    display: flex;
    flex-direction: row;
}

.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th_1, .th_2, .th_3, .th_4 {
    font-weight: 800;           /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td_1, .td_2, .td_3, .td_4 {
    background-color:#edf3e9;   /* 背景色 */
}

.th_1, .td_1 {
    width: 15%;
}

.th_2, .td_2 {
    width: 25%;
}

.th_3, .td_3 {
    width: 25%;
}

.th_4, .td_4 {
    width: 85%;
}

● 运行结果：

在这里插入图片描述

四、对表格的点击操作

● 以上制作的表格都是 “静态的”，我们只能对它们进行 “读”，但有时候我们希望对它们进行 “写”。比如说：我们想点一点关注，那该怎么去做呢？

● 这时我们就要用在《微信小程序③——wxml+wxss+js基础入门[样例+解析]》中写到的 bindtap 了，我们这时就要引入 .js 文件。

● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<scroll-view class="table" scroll-x="true">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th_1">排名</view>
        <view class="th_2">用户昵称</view>
        <view class="th_3">技术领域</view>
        <view class="th_4">博主简介</view>
        <view class="th_5">是否关注</view>
    </view>
    <!-- 表格第二行 -->
    <view class="tr">
        <view class="td_1">1</view>
        <view class="td_2">英雄哪里出来</view>
        <view class="td_3">人工智能与算法</view>
        <view class="td_4">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好，会用余生致力于将算法写得清晰、讲得明白。</view>
        <view bindtap="ChooseTap_1" class="td_5">
            <view wx:if="{{condtion_1}}">
                <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
            </view>
        </view>
    </view>

    <!-- 表格第三行 -->
    <view class="tr">
        <view class="td_1">2</view>
        <view class="td_2">哪吒</view>
        <view class="td_3">后端开发</view>
        <view class="td_4">CSDN新星计划导师，博客专家，哪吒社区维护者，公众号【哪吒编程】维护者，专注Java干货分享。</view>
        <view bindtap="ChooseTap_2" class="td_5">
            <view wx:if="{{condtion_2}}">
                <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
            </view>
        </view>
    </view>
    
    <!-- 表格第四行 -->
    <view class="tr">
        <view class="td_1">3</view>
        <view class="td_2">_陈哈哈</view>
        <view class="td_3">全栈开发</view>
        <view class="td_4">陈士杰，幽默爱笑的程序员，北漂五年。文章坚持“以用为本”，...。人生有味是清欢，我有故事，你有酒么？</view>
        <view bindtap="ChooseTap_3" class="td_5">
            <view wx:if="{{condtion_3}}">
                <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
            </view>
        </view>
    </view>
</scroll-view>

● WXSS 代码：

.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    width: 180%;    /* 15% + 25% + 25% + 85% + 30% = 180%*/
    display: flex;
    flex-direction: row;
}

.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4, .th_5, .td_5 { /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th_1, .th_2, .th_3, .th_4, .th_5 {
    font-weight: 800;             /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td_1, .td_2, .td_3, .td_4, .td_5 {
    background-color:#edf3e9;   /* 背景色 */
}

.th_1, .td_1 {
    width: 15%;
}

.th_2, .td_2 {
    width: 25%;
}

.th_3, .td_3 {
    width: 25%;
}

.th_4, .td_4 {
    width: 85%;
}

.th_5, .td_5 {
    width: 30%;
}

.imgSet {       /* 图片的样式 */
    width: 40px;
    height: 40px;
}

● JavaScript 代码：

Page({

    data: {
        condtion_1: false,
        condtion_2: false,
        condtion_3: false
    },

    ChooseTap_1(e) {		/* 关注第一行的作者 */
        var tmp = this.data['condtion_1'];
        if (tmp == false)
        {
            this.setData({
                condtion_1: true
            })
        } else {
            this.setData({
                condtion_1: false
            })
        }
    },
   
    ChooseTap_2(e) {	/* 关注第二行的作者 */
        var tmp = this.data['condtion_2'];
        if (tmp == false)
        {
            this.setData({
                condtion_2: true
            })
        } else {
            this.setData({
                condtion_2: false
            })
        }
    },

    ChooseTap_3(e) {	/* 关注第三行的作者 */
        var tmp = this.data['condtion_3'];
        if (tmp == false)
        {
            this.setData({
                condtion_3: true
            })
        } else {
            this.setData({
                condtion_3: false
            })
        }
    }
})

● 运行结果：
在这里插入图片描述

五、对表格的“增、删、改”操作

● 如果我们要进行 “输入” 操作，那就要用到『输入组件(input)』，它的官方文档：『输入组件(input)』

● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<scroll-view class="table" scroll-x="true">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th_1">排名</view>
        <view class="th_2">用户昵称</view>
        <view class="th_3">技术领域</view>
        <view class="th_4">博主简介</view>
    </view>
    
    <!-- 表格第四行 -->
    <view wx:for="{{lists}}" wx:key="{{index}}">
        <view class="tr">
            <input class="td_1"></input>
            <input class="td_2"></input>
            <input class="td_3"></input>
            <input class="td_4"></input>
        </view>
    </view>

    <view class="button_box">
		<button class='button_style' bindtap='add'>添加一行</button>
		<button class='button_style' bindtap='del'>删除一行</button>
	</view>
</scroll-view>

● WXSS 代码：

.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    width: 150%;    /* 15% + 25% + 25% + 85% = 150%*/
    display: flex;
    flex-direction: row;
}

.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th_1, .th_2, .th_3, .th_4 {
    font-weight: 800;             /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td_1, .td_2, .td_3, .td_4 {
    height: 50px;
    background-color:#edf3e9;   /* 背景色 */
}

.th_1, .td_1 {
    width: 15%;
}

.th_2, .td_2 {
    width: 25%;
}

.th_3, .td_3 {
    width: 25%;
}

.th_4, .td_4 {
    width: 85%;
}

.button_box {
    margin-top: 30px;
    display: flex;
}

.button_style {
    width: 50%;
    color: cornflowerblue;
    background-color: rgb(233, 207, 186);
}

● JavaScript 代码：

Page({

    data: {
        lists: [{},{},{}]    // 三个空行
    },

    add: function(){
        var lists = this.data.lists;
        var newData = {};
        lists.push(newData); // 实质是添加 lists[] 数组内容，使 for 循环多一次
        this.setData({
            lists: lists,
        })  
    },

    del: function () {
        var lists = this.data.lists;
        lists.pop();       // 实质是删除 lists[] 数组内容，使 for 循环少一次
        this.setData({
            lists: lists,
        })
    }
})

● 运行结果：
在这里插入图片描述

◆ 结果说明：
① 这个 “能增删改的表格” 巧妙地利用了『输入组件(input)』的功能，它所做的事情都只是在 “前端”，每次重新编译，所有的数据都将清零。
② 其实还有一种方法，让 “输入框” 和 “表格” 分离开来，这样的话，可能就可以使『单元格』里的内容能进行 “合理地换行和居中”，避免出现这种 “拖动单元格才能看到所有内容” 的情况。但这需要对 JavaScript 的语法、函数很熟悉，等到了后面，更了一篇关于它的 Blog 后再做吧。

六、参考附录

[1] 《揭榜｜2021年度“博客之星&新星”十佳博主出炉》，CSDN官方博客

[2] 《微信小程序一秒学会制作table表格》，博主：开心大表哥

[3] 《微信小程序点击添加/删除表单》，博主：暖一杯茶

[4] 《微信小程序上实现 <table> 表格》，博主：亮子介

[5] 《微信小程序table表格自定义组件实现》，博主：半度℃温热

[6] 《微信小程序制作表格代码》，博主：huangmeimao

[7] 《微信小程序的表格table》，博主：程序猿_小天

[8]《微信小程序开发指南》，官方文档

上一篇文章链接: 微信小程序学习笔记④——Flex布局[实战样例之画骰子]

下一篇文章链接: 🚧 🚧 …

⭐️ ⭐️

收起

展开全文

微信小程序如何自定义table组件
2020-12-03 07:12:46

最近想要捣鼓一个自己的小程序，其中数据展示部分比较多，想用table来做展示，但是微信小程序并没有table组件，于是就自己动手捣鼓了一个，勉强能用。可以看看效果： etable使用介绍 etable的使用很简单，分为 ...

收起
微信小程序实现横向增长表格的方法
2020-10-18 08:01:05

主要介绍了微信小程序实现横向增长表格的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

收起

微信小程序 table表格 PC版本

千次阅读 2022-04-16 14:42:39

所以要求可以通过小程序分享到微信，PC端登录微信，在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~ 实现：表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等... 先上效果图（mock...

公司项目啊....其实小程序页面的商品列表也有宫格、列表、大图模式了，尽管描述得不那么详细，但是信息量也能看到个大概，但是领导或业务员比较喜欢看表格详细点，罗列得比较清晰。所以要求可以通过小程序分享到微信，PC端登录微信，在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~

实现：表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等...

先上效果图（mock数据）

小程序是没有原生 table tr th td 这些标签的，但是可以通过css 样式控制

v-for 循环换成 wx:for wx:key 就行原理都是一样的~

html 结构

<view class='container'>
		<view class='table'>
			<view class='table_thead'>
				<view class="th" style='width: 5%;'>序号</view>
				<view class='th'>图片</view>
				<view class='th'>型号</view>
				<view class='th'>颜色</view>
				<view class='th'>色号</view>
				<view class='th'>规格</view>
				<view class='th'>尺寸</view>
				<view class='th'>件数</view>
				<view class='th'>价格</view>
				<view class='th'>备注</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width: 5%;'>11</view>
				<view class="td">
					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
				</view>
				<view class="td">C01床</view>
				<view class="td">棕色</view>
				<view class="td">康高：AF-2721</view>
				<view class='td'>
					<view class="table_Text_class">舒适版</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">1500*2000*10*7</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">普通3件 气动9件</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">2389</view>
				</view>
				<view class='td'>
					备注备注备注备注备注备注备注备注备注备注备注备注
				</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width: 5%;'>22</view>
				<view class="td">
					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
				</view>
				<view class="td">C01床</view>
				<view class="td">棕色</view>
				<view class="td">康高：AF-2721</view>
				<view class='td'>
					<view class="table_Text_class">舒适版</view>
					<view class="table_Text_class">舒适版</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">1500*2000*10*8</view>
					<view class="table_Text_class">1500*2000*10*8</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">普通3件 气动8件</view>
					<view class="table_Text_class">普通3件 气动8件</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">23855</view>
					<view class="table_Text_class">23855</view>
				</view>
				<view class='td'>
					备注备注备注备注备注备注备注备注备注备注备注备注
				</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width: 5%;'>333</view>
				<view class="td">
					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
				</view>
				<view class="td">C01床</view>
				<view class="td">棕色</view>
				<view class="td">康高：AF-2721</view>
				<view class='td'>
					<block v-for="inds1 of num" :key="inds1">
						<view class="table_Text_class">舒适版</view>
					</block>
				</view>
				<view class='td'>
					<block v-for="inds2 of num" :key="inds2">
						<view class="table_Text_class">1500*2000*10*12</view>
					</block>
				</view>
				<view class='td'>
					<block v-for="inds3 of num" :key="inds3">
						<view class="table_Text_class">普通3件 气动3件</view>
					</block>
				</view>
				<view class='td'>
					<block v-for="inds4 of num" :key="inds4">
						<view class="table_Text_class">2384</view>
					</block>
				</view>
				<view class='td'>
					备注备注备注备注备注备注备注备注备注备注备注备注
				</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width: 5%;'>测试</view>
				<view class="td">
					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
				</view>
				<view class="td">C01床</view>
				<view class="td">棕色</view>
				<view class="td">康高：AF-2721</view>
				<view class='td'>
					<view class="table_Text_class">舒适版</view>
					<view class="table_Text_class">旗舰版</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">1500*2000*10*111111</view>
					<view class="table_Text_class">1500*2000*10*222222</view>
					<view class="table_Text_class">1500*2000*10*333333</view>
					<view class="table_Text_class">1500*2000*10*444444</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">3</view>
					<view class="table_Text_class">普通3件 气动5件</view>
					<view class="table_Text_class">3</view>
					<view class="table_Text_class">3</view>
				</view>
				<view class='td'>
					<view class="table_Text_class">2381</view>
					<view class="table_Text_class">2382</view>
					<view class="table_Text_class">2383</view>
					<view class="table_Text_class">2384</view>
				</view>
				<view class='td'>
					纳帕皮保用十年 头层真皮 舒适版加800元 旗舰版加1000元 高箱床加300元
				</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width: 5%;'>333</view>
				<view class="td">
					<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
				</view>
				<view class="td">C01床</view>
				<view class="td">棕色</view>
				<view class="td">康高：AF-2721</view>
				<view class='td'>
					<block v-for="inds1 of 3" :key="inds1">
						<view class="table_Text_class">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试商品商品商品</view>
					</block>
				</view>
				<view class='td'>
					<block v-for="inds2 of 3" :key="inds2">
						<view class="table_Text_class">1500*2000*10*10</view>
					</block>
				</view>
				<view class='td'>
					<block v-for="inds3 of 3" :key="inds3">
						<view class="table_Text_class">普通3件 气动3件</view>
					</block>
				</view>
				<view class='td'>
					<block v-for="inds4 of 3" :key="inds4">
						<view class="table_Text_class">2381</view>
					</block>
				</view>
				<view class='td'>
					备注备注备注备注备注备注备注备注备注备注备注备注
				</view>
			</view>
			<block v-for="index of 12" :key="index">
				<view class='table_tbody'>
					<view class='td' style='width: 5%;'>{{index}}</view>
					<view class="td">
						<image src="../../static/logo.png" mode="aspectFit" style="width: 100%;height: 80%;"></image>
					</view>
					<view class="td">C01床</view>
					<view class="td">棕色</view>
					<view class="td">康高：AF-2721</view>
					<view class='td'>
						<block v-for="inds1 of 3" :key="inds1">
							<view class="table_Text_class">舒适版</view>
						</block>
					</view>
					<view class='td'>
						<block v-for="inds2 of 3" :key="inds2">
							<view class="table_Text_class">1500*2000*10*5</view>
						</block>
					</view>
					<view class='td'>
						<block v-for="inds3 of 3" :key="inds3">
							<view class="table_Text_class">普通3件 气动3件</view>
						</block>
					</view>
					<view class='td'>
						<block v-for="inds4 of 3" :key="inds4">
							<view class="table_Text_class">2384</view>
						</block>
					</view>
					<view class='td'>
						备注备注备注备注备注备注备注备注备注备注备注备注
					</view>
				</view>
			</block>
		</view>
	</view>

css 样式

page {
		width: 100%;
		white-space: nowrap;
		overflow: scroll;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		background-color: white;
	}

	.table {
		width: 100%;
		display: inline-flex;
		flex-direction: column;
		border: 1rpx solid rgba(218, 217, 217, 1);
		border-bottom: 0;
	}

	.table_thead {
		width: 100%;
		height: 40px;
		border-top: 1rpx solid rgba(218, 217, 217, 1);
		border-bottom: 1rpx solid rgba(218, 217, 217, 1);
		display: inline-flex;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.th,
	.td {
		width: 10.555%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFF00;
		border-right: 1rpx solid rgba(218, 217, 217, 1);
		border-bottom: 1rpx solid rgba(218, 217, 217, 1);
		border-width: thin;
		font-size: 30rpx;
		font-weight: bold;
	}

	.table_tbody {
		width: 100%;
		display: inline-flex;
		flex-direction: row;
		border-bottom: 1px solid rgba(218, 217, 217, 1);
	}

	.td {
		background: white;
		min-height: 60px;
		font-weight: normal;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-line;
	}

	.table_Text_class {
		width: 100%;
		min-height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-basis: auto;
		flex-grow: 1;
		-webkit-flex-grow: 1;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-line;
		border-bottom: 1rpx solid rgba(218, 217, 217, 1);
		border-width: thin;
	}

	.table_Text_class:last-child {
		border-bottom: none;
	}

以上是微信小程序table表格随着浏览器窗口大小自适应改变大小，如果不想自适应，屏幕小出现滚动条可以左右滑动的情况，屏幕大的时候表格内容居中显示，两边留白。那么列的宽度就不要写百分比%，直接写数值。先看效果图

html 结构

<view class='container'>
  <view class='table'>
    <view class='table_thead'>
      <view class="th" style='width:70px;'>序号</view>
      <view class='th'>图片</view>
      <view class='th' style='width:100px;'>型号</view>
      <view class='th' style='width:100px;'>颜色</view>
      <view class='th'>色号</view>
      <view class='th'>规格</view>
      <view class='th'>尺寸</view>
      <view class='th' style='width:100px;'>件数</view>
      <view class='th' style='width:100px;'>价格</view>
      <view class='th'>备注</view>
    </view>
    <block wx:for="{{list}}" wx:key="index">
      <view class='table_tbody'>
        <view class='td' style='width:70px;'>{{index+1}}</view>
        <view class="td">
          <image src="{{item.image}}" mode="aspectFit" bindtap="imgClick" data-index="{{index}}" lazy-load style="width: 100%;height: 80%;"></image>
        </view>
        <view class="td" style='width:100px;'>{{item.param_model}}</view>
        <view class="td" style='width:100px;'>{{item.param_color}}</view>
        <view class="td">{{item.param_color_num}}</view>
        <view class='td'>
          <block wx:for="{{item.param_sku}}" wx:for-item="u" wx:key="u">
            <view class="table_Text_class">{{u.sku}}</view>
          </block>
        </view>
        <view class='td'>
          <block wx:for="{{item.param_sku}}" wx:for-item="e" wx:key="e">
            <view class="table_Text_class">{{e.size}}</view>
          </block>
        </view>
        <view class='td' style='width:100px;'>
          <block wx:for="{{item.param_sku}}" wx:for-item="m" wx:key="m">
            <view class="table_Text_class">{{m.num}}</view>
          </block>
        </view>
        <view class='td' style='width:100px;'>
          <block wx:for="{{item.param_sku}}" wx:for-item="e" wx:key="e">
            <view class="table_Text_class">{{e.price}}</view>
          </block>
        </view>
        <view class='td'>{{item.param_custom_remark == null?"":item.param_custom_remark}}</view>
      </view>
    </block>
  </view>
</view>

css 样式

page {
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: scroll;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: white;
}

.table {
  margin: 0 auto;
  display: inline-flex;
  flex-direction: column;
  border: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 0;
}

.table_thead {
  width: 100%;
  height: 40px;
  border-top: 1rpx solid rgba(218, 217, 217, 1);
  display: inline-flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
}

.th,
.td {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #FFFF00;
  border-right: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
  border-width: thin;
  font-size: 14px;
  font-weight: bold;
}

.table_tbody {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  border-bottom: 1px solid rgba(218, 217, 217, 1);
}

.td {
  background: white;
  min-height: 60px;
  font-weight: normal;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-line;
}

.table_Text_class {
  width: 100%;
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-basis: auto;
  /* flex-basis: 0; */
  flex-grow: 1;
  -webkit-flex-grow: 1;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-line;
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
  border-width: thin;
}

.table_Text_class:last-child {
  border-bottom: none;
}

如果表格每一列的数据比较简短，那么以上这两种方式都可以满足需求了，但是如果列的内容里面还有行，并且行里面的文字还长，超出了列的宽度文字自动换行后导致高度撑开，高度和边框线对不齐的情况，可以根据需求改下结构和样式。先上效果图！

html 结构

<view class='container'>
		<view class='table'>
			<view class='table_thead'>
				<view class="th" style='width:70px;'>序号</view>
				<view class='th'>图片</view>
				<view class='th' style='width:100px;'>型号</view>
				<view class='th' style='width:100px;'>颜色</view>
				<view class='th'>色号</view>
				<view class='th'>规格</view>
				<view class='th'>尺寸</view>
				<view class='th' style='width:100px;'>件数</view>
				<view class='th' style='width:100px;'>价格</view>
				<view class='th'>备注</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width:70px;font-weight: bold;'>测试</view>
				<view class="td" style="padding: 10px 0px;">
					<image src="/static/logo.png" mode="scaleToFill"
						style="width: 150px;height: 150px;margin: auto;"></image>
				</view>
				<view class="td" style='width:100px;'>C01床</view>
				<view class="td" style='width:100px;'>棕色</view>
				<view class="td">康高：AF- 2721</view>
				<view class="td max_td">
					<view class="max_td_row">
						<view class="max_td_row_item">舒适版</view>
						<view class="max_td_row_item">1700*2180*1200</view>
						<view class="max_td_row_item" style="width: 100px;">普通3件</view>
						<view class="max_td_row_item" style="width: 99.5px;">2380</view>
					</view>
				</view>
				<view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width:70px;font-weight: bold;'>测试</view>
				<view class="td" style="padding: 10px 0px;">
					<image src="/static/logo.png" mode="scaleToFill"
						style="width: 150px;height: 150px;margin: auto;"></image>
				</view>
				<view class="td" style='width:100px;'>C01床</view>
				<view class="td" style='width:100px;'>棕色</view>
				<view class="td">康高：AF- 2721</view>
				<view class="td max_td">
					<view v-for="index2 of 2" :key="index2" class="max_td_row">
						<view class="max_td_row_item">舒适版</view>
						<view class="max_td_row_item">1700*2180*1200</view>
						<view class="max_td_row_item" style="width: 100px;">普通3件</view>
						<view class="max_td_row_item" style="width: 99.5px;">2380</view>
					</view>
				</view>
				<view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view>
			</view>
			<view class='table_tbody'>
				<view class='td' style='width:70px;font-weight: bold;'>测试</view>
				<view class="td" style="padding: 10px 0px;">
					<image src="/static/logo.png" mode="scaleToFill"
						style="width: 150px;height: 150px;margin: auto;"></image>
				</view>
				<view class="td" style='width:100px;'>C01床</view>
				<view class="td" style='width:100px;'>棕色</view>
				<view class="td">康高：AF- 2721</view>
				<view class="td max_td">
					<view v-for="index2 of 3" :key="index2" class="max_td_row">
						<view class="max_td_row_item">舒适版</view>
						<view class="max_td_row_item">1700*2180*1200</view>
						<view class="max_td_row_item" style="width: 100px;">普通3件</view>
						<view class="max_td_row_item" style="width: 99.5px;">2380</view>
					</view>
				</view>
				<view class='td'>纳帕皮保用十年 头 层真皮 舒适 版加800元 旗舰版 加1000元 高箱床 加300元</view>
			</view>
			<block v-for="index of 3" :key="index">
				<view class='table_tbody'>
					<view class='td' style='width:70px;font-weight: bold;'>{{index}}</view>
					<view class="td" style="padding: 10px 0px;">
						<image src="/static/logo.png" mode="scaleToFill"
							style="width: 150px;height: 150px;margin: auto;"></image>
					</view>
					<view class="td" style='width:100px;'>C01床</view>
					<view class="td" style='width:100px;'>棕色</view>
					<view class="td">康高：AF- 2721</view>
					<view class="td max_td">
						<view class="max_td_row">
							<view class="max_td_row_item">舒适版</view>
							<view class="max_td_row_item">1700*2180*1200</view>
							<view class="max_td_row_item" style="width: 100px;">普通3件 气动5件 ---测试测试测试</view>
							<view class="max_td_row_item" style="width: 99.5px;">2380</view>
						</view>
						<view v-for="index2 of 3" :key="index2" class="max_td_row">
							<view class="max_td_row_item">舒适版{{index2}}</view>
							<view class="max_td_row_item">1700*2180*1200</view>
							<view class="max_td_row_item" style="width: 100px;">3</view>
							<view class="max_td_row_item" style="width: 99.5px;">2380</view>
						</view>
					</view>
					<view class='td'>每一行的高度都是不固定的，由内容撑开，每一列 td 默认高度为90px，图片为固定150px高度，当td 高度大于图片高度时图片居中显示，文字过长自动换行内容撑开高度，左右两边的单元格高度也能保持一致</view>
				</view>
			</block>
		</view>
	</view>

css 样式

	page {
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		overflow: scroll;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		background-color: white;
	}

	.table {
		margin: 0 auto;
		display: inline-flex;
		flex-direction: column;
		border: 1px solid rgba(218, 217, 217, 1);
		border-bottom: 0;
	}

	.table_thead {
		width: 100%;
		height: 40px;
		border-top: 1px solid rgba(218, 217, 217, 1);
		border-width: thin;
		display: inline-flex;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.th,
	.td {
		width: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFF00;
		border-right: 1px solid rgba(218, 217, 217, 1);
		border-bottom: 1px solid rgba(218, 217, 217, 1);
		border-width: thin;
		font-size: 14px;
		font-weight: bold;
	}

	.table_tbody {
		width: 100%;
		display: inline-flex;
		flex-direction: row;
		border-bottom: 1px solid rgba(218, 217, 217, 1);
	}

	.td {
		background: white;
		min-height: 90px;
		font-weight: normal;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-line;
	}

	.max_td {
		width: 600px;
	}

	.max_td_row {
		width: 100%;
		display: flex;
		border-bottom: 1px solid rgba(218, 217, 217, 1);
		flex-basis: auto;
		flex-grow: 1;
		-webkit-flex-grow: 1;
	}

	.max_td_row:last-child {
		border-bottom: none;
	}

	.max_td_row_item {
		width: 200.5px;
		border-right: 1px solid rgba(218, 217, 217, 1);
		border-width: thin;
		min-height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.max_td_row_item:last-child {
		border-right: none;
	}

js 就不贴了~

我还有一篇文章是微信小程序 table 表格，可以固定表头和表格首列右侧表格可以左右滚动，（多种表格示例）有兴趣可以去看看 https://blog.csdn.net/m0_61073617/article/details/124430213

收起

展开全文

微信小程序 表单Form实例详解（附源码）
2020-12-29 04:34:29

微信小程序 表单Form实例表单Form的应用很广泛，我们可以利用form设计登录注册，也可以设计一种答题问卷的形式，今天主要讲一下form的使用 form表单，将组件内输入的”switch”,”input”,”checkbox”,”slider”,...

收起
微信小程序实现简单表格
2021-01-20 08:28:14

本文实例为大家分享了微信小程序实现简单表格的具体代码，供大家参考，具体内容如下效果图： wxml <view class=th>SPB <view class=th>DPB 日期 [code]}> <view

收起
微信小程序-微信小程序渲染html
2019-08-06 04:55:17

微信小程序渲染html 支持的特性: 大部分的普通HTML标签(未全部测试) , <video>, <audio> , , , 等表格标签标签转`` HTML entities 七牛图片裁剪自定义插件不支持<form>, ,等表单元素. 使用...

收起
微信小程序 实现列表项滑动显示删除按钮的功能
2021-01-03 06:58:17

微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件，所以也没有iOS上惯用的列表项左滑删除的功能，SO只能自己干了。原理很简单，用2个层，上面的层显示正常的内容，下面的层显示一个删除...

收起
微信小程序：表格的实现
千次阅读 2020-12-29 06:05:12

一个在微信小程序中创建表格的demo效果图最后做出来大概就是这个样子的，先看下设计图：(画的真好看)设计图然后再看下数据返回的格式：数据返回格式这数据...o.0...分析数据得知，后台返回的数据远比设计图上描绘的...

一个在微信小程序中创建表格的demo

效果图

最后做出来大概就是这个样子的，先看下设计图：(画的真好看)

设计图

然后再看下数据返回的格式：

数据返回格式

这数据...o.0...

分析数据得知，后台返回的数据远比设计图上描绘的复杂，内容是不固定的，而且需要显示一周的排班

个人思路：用scroll-view来做，整个表格按 -行- 分为4大块：排班、上午、下午、晚上。

①先将从今天开始往后7天的日期放到数组中，作为第一大块的数据源

②循环遍历数据，找出所有排班在上午的时间，然后分别放到7个数组中(因为可能有多个数据，还是需要用数组存放)

③同理得出下午和晚上的数据

1、第一步：更改数据格式，将数据处理之后变为如下形式：

第一大块：weekArray:

存放从今天开始 -> 7天后的数据在数组中

第二、三、四大块：sch_listData:

数据更改后

为什么要把数据变成这样呢？总感觉这样的方法有点傻，但又想不到别的办法，所以先这样吧，麻烦是麻烦了点，幸好最后的效果还不错。

wxml:

wxml

代码传图片太麻烦了，有需要的朋友去Git下载吧，

小程序菜鸟，如果小小的踩坑经验能帮到你，记得给点小鼓励，谢谢支持～

收起

展开全文
WxTreeTable:这是一个微信小程序的无限级下拉表格
2021-05-03 06:48:00

WxTreeTable 这是一个微信小程序的无限级下拉表格

收起

JavaScript
微信小程序实现手指拖动选项排序
2020-12-28 17:54:54

本文实例为大家分享了微信小程序实现手指拖动选项排序的具体代码，供大家参考，具体内容如下效果： wxml：手指移动选项排序 <view catchtouchmove=listitemmove catchtouchend=li

收起
微信小程序——在线考试系统（源码+图片展示）.zip
2022-06-19 10:38:46

微信小程序——在线考试系统（源码+图片展示）一款微信小程序考试系统，可用于考试小程序、答题小程序，有前后端源码和数据库。有完整的文档教程和视频教程，易于二次开发，部署简单快捷、界面设计友好。功能列表...

收起
微信小程序实现页面左右滑动
2021-01-21 10:55:34

本文实例为大家分享了微信小程序实现页面左右滑动的具体代码，供大家参考，具体内容如下效果： wxml文件 <view bindtap=tap_ch xss=removed>{{open ? '手指左滑' : '手指右滑'}}</

收起
微信小程序 图表模板
2020-06-17 09:16:11

微信小程序图表插件（wx-charts）是基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个。

收起
微信小程序实现列表的横向滑动方式
2020-10-15 03:25:38

主要介绍了微信小程序实现列表的横向滑动，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

收起
微信小程序模板下载_300多套精品模板
2020-04-30 12:43:31

微信小程序模板下载_300多套精品模板，涵盖类型有：点餐，电商，视频，资讯，阅读，社交等等，满足各种小程序开发样式需求

收起
微信小程序组件传值图示过程详解
2021-01-03 08:33:10

A是父组件，B是子组件父传子  <componentB paramAtoB='{{paramAtoB}}'></componentB> //父组件Ajson （里面不能有注释） ... navigationBarTitleText: 父子传值, ...

收起
微信小程序使用table表格
千次阅读 2022-02-18 17:18:49

做小程序项目中遇到这种需要合并行和并列来展示数据但是小程序没有table标签不能使用合并行合并列找了很多发现小程序中有一个标签和 VUE中的 v-html是一样的功能 <rich-text nodes="{{tableHtml}}"></...

收起

html

效果

属性

子组件WXML

子组件JS

子组件WXS

子组件JSON

子组件WXSS

父组件WXML

父组件JS

父组件JSON

父组件WXSS

钉钉Weex微应用与微信小程序对比表格

微信小程序制作表格的方法

微信小程序开发表格demo

微信小程序实现简易table表格

微信小程序 表格

微信小程序实现的绘制table表格功能示例

微信小程序自定义组件 - 表格组件来啦

微信小程序把页面做成图片分享【原创】

微信小程序(5)——如何制作好看的表格

文章目录

一、从“html的table”到 “微信小程序的table”

二、统一格式的表格

三、非统一格式的表格

四、对表格的点击操作

五、对表格的“增、删、改”操作

六、参考附录

微信小程序如何自定义table组件

微信小程序实现横向增长表格的方法

微信小程序 table表格 PC版本

微信小程序 表单Form实例详解（附源码）

微信小程序实现简单表格

微信小程序-微信小程序渲染html

微信小程序 实现列表项滑动显示删除按钮的功能

微信小程序：表格的实现

WxTreeTable:这是一个微信小程序的无限级下拉表格

微信小程序实现手指拖动选项排序

微信小程序——在线考试系统（源码+图片展示）.zip

微信小程序实现页面左右滑动

微信小程序 图表 模板

微信小程序实现列表的横向滑动方式

微信小程序模板下载_300多套精品模板

微信小程序组件传值图示过程详解

微信小程序使用table表格

微信小程序做表格

微信小程序表格

微信小程序表单Form实例详解（附源码）

微信小程序实现列表项滑动显示删除按钮的功能

微信小程序图表模板