移动端表格组件uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂详细注释版本
Posted 接口写好了吗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端表格组件uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂详细注释版本相关的知识，希望对你有一定的参考价值。
前言：
由于最近需要做移动端的项目
有个pc端的后台系统里面需要移一部分页面过来
而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉
然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站
都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容
可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。
所以我就直接手写了一个简单的表格展示组件，配上一些我需要的功能。可以先用着了。
重点是我是原生的标签写的，不是引入一大堆的插件之类的，uniapp可以直接用。
想修改源码也简单。我都注释好了
效果图
小程序页面兼容，可以看到点击按钮之后会拿到对应行的数据
H5页面的，也是一样兼容的可能，也能拿到数据
移动端，手机预览效果，展示了数据和点击生效，滚动到底部可以触发方法，可以在这里写加载第二页表格的方法
功能：
1，数据展示：只需要往组件内传入表头和列表数据就能展示，列表数据和elementul的表格一样。表头要自己配置
2，固定表头：上滚动的时候表头会定位在上面不动
3，固定列：表头内配置属性，可以让这一列固定左边不动。目前只能固定一列
4，行底纹：就是给一行的单元格加上背景色，需要在tabledata列表中添加一个字段bgcolor就可以了
5，列底纹：同上，区别是在表头内添加一个字段bgcolor
6，单元格文字颜色改变：这是我们项目的要求，需要拿到每个单元格的数据和指标对比大小来标红。这里在父组件就可以配置
7，操作列：表头添加操作列，key给edit就会出现一个编辑和删除的列。不写就没有这一列。点击按钮会触发父组件的方法
8，滚动到底部：滚动到底部会触发父组件方法。可以做业务操作，比如拿第二页的表格
9，自动列宽：根据表格内单元格内容的宽度来动态赋值几个宽度，宽度是提前定义好的。由于表头和表体需要宽度一致，所以提前设置几个档次的固定宽度。具体使用是自动根据表体或者表头哪一个长，用哪一个的宽。保证数据的展示完全。当数据过长的时候会自动隐藏并省略号显示。这里我就没有加其他的功能了，后期可以自行更改，把这个文字加一个组件包裹，就是点击可以显示全部文字的弹框那个。
引入组件
uniapp可以直接使用，整体就引入了一个组件，uniapp带有的scroll-view组件。需要去uniapp文档内引入一下，直接插件市场下载一下就好了
代码：
组件部分：
写一个tableDiv的vue文件，当然名字随便你换
然后把代码复制进去。
<template>
<view class="wrap">
<!-- @scrolltolower:滚动到底部触发 lower-threshold：距离底部多少距离触发@scrolltolower -->
<scroll-view class="scroll-view_H" scroll-x="true" scroll-y="true" @scrolltolower='scrollBottom'
:lower-threshold='2'>
<view class="top" id="top" :style="width:tableWidths+'px'">
<view v-for="(h,n) in header" :key='n' :class="'header_dyg':true,'flexs':h.flxe"
:style="width:h.hWidth+'px'">
h.name
</view>
</view>
<view class="bottom" :style="maxHeight: tableHeight+'px',width:tableWidths+'px'">
<view class="tablebox" v-for="(t,s) in tableData" :key='s' @click="jumpDetailed(t)">
<view v-for="(h,n) in header" :key="n"
:class="'table_dyg':true,'tdColClass':h.bgcolor,'tdRowClass':t.bgcolor,'flexs':h.flxe"
:style="width:h.hWidth+'px'">
<!-- 不等于操作列就显示文字 -->
<text v-if="h.key!=='edit'" :style="color:getColor(t,h)">t[h.key]</text>
<!-- 操作列显示按钮，后期用插槽 -->
<view class="uni-group" v-else style="background-color: #fff;">
<button class="uni-button" size="mini" type="primary" style="margin-right: 5px;"
@click="editTable(t)">编辑</button>
<button class="uni-button" size="mini" type="warn" @click="deleteTable(t)">删除</button>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
// 表头配置：flxe(固定列)，bgcolor(列底纹)
// 表体配置：bgcolor(行底纹)
export default
props:
data2:
type: Array,
required: true,
default: function()
return [];
,
head:
type: Array,
required: true,
default: function()
return [];
,
tableHeight:
required: true,
type: [Number, String],
default: function()
return 0;
,
data()
return
//表体
tableData: [],
//表头
header: [],
// 表格总长度
tableWidths:0
,
watch:
// 监听列表
'data2'(a,b)
this.tableData = a
,
// 监听表头
'head'(a,b)
this.header = a
//计算列宽
this.tableWidth()
,
,
created()
//#ifdef H5
this.tableData = this.data2 //列表
this.header = this.head //表头
this.tableWidth()
// #endif
,
methods:
// 返回行数据
jumpDetailed(row)
this.$emit('rowData',row)
,
// 滚动到底部，调用父组件方法
scrollBottom(e)
// 滚动到底部才触发，滚动到右边不触发
if (e.detail.direction == "bottom")
this.$emit('scrollBottom')
,
// 颜色对比
getColor(row, col)
let color = 'black'
// 传值给父组件，通过父组件的方法内计算判断当前单元格数据是否需要标红，然后通过回调函数，返回一个color值来渲染
this.$emit('getTextColor', row, col, val =>
color = val
)
return color
,
// 修改按钮
editTable(val)
this.$emit('getEdit', val)
,
// 删除按钮
deleteTable(val)
this.$emit('getDelete', val)
,
// 计算单元格宽度
tableWidth()
let w=0 //计算表格长度
this.header.forEach((head, index) =>
let hw = head.name.length //表头单元格宽度
let dw = 0 //列表单元格宽度
this.tableData.forEach(data =>
// 如果是操作列，就直接给十个字符长度，也就是列宽自动150，不是操作列的统一看字符串长度决定宽度
let a = (head.key == 'edit' ? '1234567891' : (data[head.key]?data[head.key].toString():'1'))
let tw = (head.key == 'edit' ? 10 : a.length)
// 这里每次循环找出更大的数赋值，确保dw中是表体单元格这一列中最大宽度，根据最大宽度来判断单元格显示
if (dw < tw)
dw = tw
)
// 表体单元格内容宽度小于表头内容时，以表头的宽度为主。根据表头的字符长度来区分宽度
if (dw <= hw)
if (hw <= 3)
head['hWidth'] = 50
else if (hw <= 5)
head['hWidth'] = 80
else
head['hWidth'] = 130
else
// 表体内容宽度大于表头内容宽度时，以表体宽度为主。根据表头的字符长度来区分宽度
if (dw <= 3)
head['hWidth'] = 50
else if (dw <= 5)
head['hWidth'] = 80
else
head['hWidth'] = 130
w+=head['hWidth'] //叠加表格总长度
)
this.tableWidths=w //给表格赋值总长度
</script>
<style lang="scss">
.wrap
width: 100%;
// 表头
.top
display: flex;
position: sticky; //表头向上滚动时固定住
top: 0;
//width: 750px; //左右滚动时不会把固定的表头滚动走
z-index: 100; //滑动时表头不被覆盖
.header_dyg
height: 40px;
text-align: center;
line-height: 40px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0 5px;
background-color: #f5f5f6;
font-size: 14px;
font-weight: bold;
color: #2b2b2b;
flex-shrink: 0;
// 列定位固定单元格
.flexs
position: sticky;
left: 0;
background-color: #f5f5f6;
z-index: 10;
// 表格列表
.bottom
//width: 750px;
.tablebox
display: flex;
font-size: 14px;
.table_dyg
height: 30px;
text-align: center;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0 5px;
flex-shrink: 0;
// 列定位固定单元格
.flexs
position: sticky;
left: 0;
background-color: #fff;
z-index: 10;
// 列的颜色
.tdColClass
background-color: #d9edf7;
// 行的颜色
.tdRowClass
background-color: #afdfe4;
</style>
然后父组件引入子组件使用
<template>
<view class="box">
<!-- 表格组件：参数解释：@getTextColor：调用方法判断数据后返回对比颜色，可以改变单元格文字的颜色 -->
<!-- @getEdit：点击表格中编辑按钮会触发的方法 @getDelete：点击表格中删除按钮会触发的方法 @scrollBottom：滚动到底部时触发 @rowData：获取点击行的数据-->
<!-- data：列表数据，格式和elementul表格一样，head：表头数据，格式[name:'列名',key:'对应列表的key',bgcolor:1代表这一列添加背景色,flxe:1代表这一列固定],tableHeight:表格表体高度 -->
<mytable @scrollBottom='scrollBottom' @getTextColor='getRedText' @getEdit='editTable'
@getDelete='deleteTable' @rowData='getRow' :data2='tableData' :head='header' :tableHeight='310'>
</mytable>
</view>
</template>
<script>
import tableDiv from './tableDiv.vue'
export default
components:
tableDiv
,
data()
return
//表体
tableData: [
"date": "2020-09-01",
"name": "11",
"address": "上海市普陀区金沙江路 1518 弄",
"age": "18",
bgcolor: 1
,
"date": "2020-09-02",
"name": "22",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-03",
"name": "33",
"address": "上海市普陀区金沙江路 1519 弄",
"age": "18"
,
"date": "2020-09-04",
"name": "44",
"address": "上海市普陀区金沙江路 1516 弄",
"age": "18"
,
"date": "2020-09-05",
"name": "55",
"address": "上海市普陀区金沙江路 1518 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
,
"date": "2020-09-06",
"name": "66",
"address": "上海市普陀区金沙江路 1517 弄",
"age": "18"
],
//表头
header: [
name: '日期',
key: 'date',
flxe: 1 //固定的列，只能有一个列
,
name: '姓名',
key: 'name',
bgcolor: 1 //列底纹
,
name: '地址',
key: 'address'
,
name: '年龄',
key: 'age'
,
name: '年龄',
key: 'age'
,
name: '操作',
key: 'edit'
]
,
methods:
// 自定义事件方法，业务逻辑判断是否需要标红，然后回调给子组件颜色
getRedText(row, col, callback)
let color = 'black'
// 判断值是否需要标红
if (row[col.key] == '22')
color = 'red'
else
color = 'black'
// 通过回调函数返回值
callback(color);
微信小程序前后端分离怎么实现
微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开，前端负责展示和交互，后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤：
1. 前端代码开发：使用微信小程序开发者工具或其他工具，开发出前端的界面、功能、逻辑代码等。
2. 后端接口开发：后端负责提供API接口，承担数据处理和逻辑控制等任务。采用RESTful API 或GraphQL API 形式提供前端需要的数据接口。
3. 前后端接口对接：在前端代码中，需要对后端提供的接口进行调用，获取数据进行展示，完成前后端交互。
4. 服务端部署：将后端代码部署到服务器上，在服务器上运行后端代码，使得前端发起请求后能够得到正确的数据返回。
5. 网络安全和数据安全：在前端和后端的实现过程中，需要注意网络安全和数据安全的问题，保证通信过程中的安全以及数据的保密性和完整性。
以上是微信小程序前后端分离实现的一些关键步骤，需要注意的是，该过程需要前端和后端开发人员进行密切协作，并进行适当的测试和调整，以保证整体的实现效果和性能。
参考技术A
微信小程序前后端分离可以通过以下步骤来实现：
1. 前端使用框架如Vue、React等，通过AJAX或fetch等方式向后端发送请求，获取数据并展示。
2. 后端使用RESTful API接口提供服务，将数据以JSON格式返回给前端。后端可选用Node.js、Spring Boot、Django等框架实现。
3. 在小程序中使用wx.request() API来发送请求和接收响应。前端需要处理好请求参数、请求头、请求体等内容，并对响应进行解析和处理。
4. 部署方面，可以将前端部署到静态文件服务器上，将后端部署到云服务平台，例如阿里云、腾讯云等。
5. 安全性方面，需要注意前端的安全问题，尤其是防止XSS攻击；同时也要注意后端的安全问题，如SQL注入、身份验证等。
总之，微信小程序前后端分离需要前后端协同开发，具有良好的接口设计和文档说明，以及严格的安全措施，才能实现高效、稳定和安全的应用
参考技术B
微信小程序前后端分离可以通过Restful API接口实现。首先，前端页面由小程序框架进行搭建，并定义数据结构，接口请求，以及用户交互等；其次，后端项目服务器端部署实现RESTful API接口，提供各种功能的支持和操作；最后，小程序客户端和服务器端建立联系，实现前后端分离，从而实现小程序前后端分离开发。
参考技术C
微信小程序前后端分离实现的主要原理是：利用微信内置的JavaScript SDK，使微信小程序前端与后端实现了无缝连接，从而实现了前后端分离的效果。
前端代码通过微信小程序提供的JavaScript SDK接口，可以实现和后端API的交互，来获取所需的数据，从而实现小程序功能的展示和操作。
后端API是一段独立的服务程序，使用HTTP协议向前端发送JSON格式的响应数据，后端API可以实现前端所需要的各种数据处理，比如查询数据库，处理数据等。
通过前后端分离，微信小程序可以更快速地实现业务开发，前端可以更加专注于页面的展示和操作，而后端可以完成对数据的处理，从而提高了小程序开发的效率和用户体验。
参考技术D
微信小程序前后端分离的实现，主要是通过前后端分离的技术，来实现微信小程序的前端和后端的分离。
前端部分主要是实现前端框架，例如Vue，React，Angular等，实现前端页面的展示，框架中提供了很多组件，可以快速开发页面，框架中也有很多API，可以实现页面的交互，和数据的获取。
后端部分，主要是实现数据的存储，通过后端语言，例如Node.js，PHP，Python等，实现服务器的搭建，实现数据库的创建和数据的存储，以及实现接口的设计，从而实现前端数据的获取。
实现微信小程序前后端分离，需要前端和后端开发人员配合，前端人员实现页面的搭建和交互，后端实现数据的存储和接口的设计，两者配合完成微信小程序前后端分离的实现。
以上是关于移动端表格组件uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂详细注释版本的主要内容，如果未能解决你的问题，请参考以下文章
uniapp实现下拉刷新及上拉（分页）加载更多（app，H5，小程序均可使用）