当前位置：首页 > news >正文

uniapp微信小程序简单表格展示

news 2025/10/25 6:46:57

很简单的一个表格展示，自己写的，功能一般般。

<template><view class="x-simple-table" :style="{ width: width, height: height, maxHeight: maxHeight  }"><view class="x-simple-table-panel"><view class="table-header tui-flex-align-center"><view class="table-cell border-rb" v-for="header in effectiveHeaders" :key="header.onlyId":class="header.class":style="header.style">{{ header.title }}</view></view><view v-for="cellOption in effectiveDataList" :key="cellOption.onlyId" class="table-row tui-flex-align-center"><view v-for="cell in cellOption.cellList" :key="cell.onlyId"class="table-cell border-rb" :style="cell.style":class="cell.class">{{ cell.value }}</view></view></view></view>
</template>
<script>export default {props: {width: {type: String,default: 'auto'},height: {type: String,default: 'auto'},maxHeight: {type: String,default: 'auto'},headers: {type: Array,default: new Array()},dataList: {type: Array,default: new Array()}},data () {return {tableFieldWidth: 100,autoHeaderWidth: []}},computed: {effectiveHeaders () {let onlyId = Date.now()return this.headers.map((e, index) => {const { field, width, hStyle = '', hClass = '' } = econst { width: autoWidth } = this.autoHeaderWidth.find(ah => ah.field === field) || {}const newHeader = { ...e, onlyId: onlyId++ * 2}const styleArray = []const classArray = [hClass]// if (index < this.headers.length - 1) {//     classArray.push('border-r')// }// if (this.dataList.length) {//     classArray.push('border-b')// }if (width || autoWidth) {newHeader.widthUnit = width ? 'rpx' : 'px'styleArray.push(`width: ${width || autoWidth}${newHeader.widthUnit}`)} else {newHeader.autoWidthFlag = truestyleArray.push('flex: 1')classArray.push(`x-auto-width-header-${field}`)}hStyle && styleArray.push(hStyle)Object.assign(newHeader, {width: width || autoWidth,style: styleArray.join(';'),class: classArray.join(' ')})return newHeader})},effectiveDataList () {if (!this.effectiveHeaders.length) {return []}const nullValueArray = [void (0), null]const newDataList = []let onlyId = Date.now()for (let rowIndex = 0; rowIndex < this.dataList.length; rowIndex++) {const row = this.dataList[rowIndex]const tableCellValue = []for (let cellIndex = 0; cellIndex < this.effectiveHeaders.length; cellIndex++) {const header = this.effectiveHeaders[cellIndex]const tClass = row[`${header.field}_class`]const classArray = []// if (cellIndex < this.effectiveHeaders.length - 1) {//     classArray.push('border-r')// }// if (rowIndex < this.dataList.length - 1) {//     classArray.push('border-b')// }tClass && classArray.push(tClass)const tStyle = row[`${header.field}_style`]const styleArray = [ `width: ${header.width || 0}${header.widthUnit || 'rpx'}` ]tStyle && styleArray.push(tStyle)const value = nullValueArray.includes(row[header.field]) ? '' : row[header.field] + (header.suffix || '')tableCellValue.push({$row: row,style: styleArray.join(';'),class: classArray.join(' '),field: header.field,value,onlyId: onlyId++})}newDataList.push({onlyId: onlyId++,cellList: tableCellValue})}return newDataList}},mounted () {this.refactorCellWidth()},methods: {refactorCellWidth () {this.$nextTick(_ => {const autoWidthHeaderList = this.effectiveHeaders.filter(e => e.autoWidthFlag)if (!autoWidthHeaderList.length) {return}const $el = uni.createSelectorQuery().in(this)autoWidthHeaderList.forEach(header => {$el.select(`.x-auto-width-header-${header.field}`).boundingClientRect(({ width }) => {const ahRow = this.autoHeaderWidth.find(ah => ah.field === header.field)if (ahRow) {ahRow.width !== width && this.$set(ahRow, 'width', width)} else {this.autoHeaderWidth.push({field: header.field,width})}}).exec()})})}}}
</script>
<style lang="scss" scoped>$border: 2rpx solid rgba(229, 229, 229, 1);.x-simple-table {border: $border;border-radius: 12rpx;font-size: 28rpx;color: rgba(102, 102, 102, 1);overflow: hidden;.x-simple-table-panel {overflow: auto;}.table-header, .table-row {align-items: stretch;}.table-cell {text-align: center;padding: 14rpx 8rpx;flex-shrink: 0;box-sizing: border-box;overflow: hidden;white-space: nowrap;min-width: 100rpx;}.border-r, .border-rb {border-right: $border;}.border-b, .border-rb {border-bottom: $border;}}
</style>