小程序table组件 满足基本需求

// components/table/table/table.js Component({ /** * 组件的属性列表 */ externalClasses: ['table-class', 'tr-class', 'td-class', 'th-class', 'tr-class_even', 'tr-class_odd'], properties: { colWidth: Number, isScroll: { type: Boolean, value: false }, header: { type: Array, value: [] }, list: { type: Array, value: [] }, showActive: { type: Boolean, value: true }, activeColor: { type: String, value: '#d6e8ff' }, maxLine: { type: Number, value: 2 } }, observers: { 'header,list': function (header, list) { this.init(); } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { setWidth (head) { const colWidth = this.data.colWidth || head.length < 3 ? (730 / head.length) : 300; const tableWidth = head.length >= 1 && this.data.isScroll ? head.length * colWidth : null; this.setData({ tableWidth }); }, init () { !this.data.tableWidth && this.setWidth(this.data.header); const { list, header } = this.data; let showHeader = JSON.parse(JSON.stringify(header)); let showList = JSON.parse(JSON.stringify(list)); showHeader.forEach((head, headIndex) => { showList.forEach((item, index) => { const body = header[headIndex].renderBody && header[headIndex].renderBody(item, index); const color = header[headIndex].renderColor && header[headIndex].renderColor(item, index); const bg = header[headIndex].renderBg && header[headIndex].renderBg(item, index); if (body !== undefined) { head.key = `col${headIndex}`; item[`col${headIndex}`] = {}; item[`col${headIndex}`].text = body; } else if (head.key) { const text = item[head.key]; item[head.key] = { text }; } if (color && head.key) { item[head.key].color = color; } if (bg && head.key) { item[head.key].bg = bg; } }); }); this.setData({ showHeader, showList }); }, checkRow (index) { if (!this.data.showActive) { return; } index = /\d+/.test(index) ? index : 0; this.setData({ currentIndex: index }); }, onLongPress (e) { const { index } = e.currentTarget.dataset; this.checkRow(index); const data = this.data.list[index]; this.triggerEvent('onLongPress', { index, data }); }, onTap (e) { const { index } = e.currentTarget.dataset; this.checkRow(index); const data = this.data.list[index]; this.triggerEvent('onClick', { index, data }); } } });