table-uni是啥组件的table

Posted 2023-03-22

用uni-table插件来生成table，是通过遍历数组生成你所需的table，主要代码如下：

<uni-table border stripe emptyText="暂无更多数据">
<uni-tr>
<uni-th align="center" width="50">序号</uni-th>
<uni-th align="center" v-for="(item, index) in headNameData" :key="index">item.name</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tbodyDataList" :key="index">
<uni-td align="center">index + 1</uni-td>
<uni-td align="center" v-for="(item2, index2) in headNameData" :key="index2" >
processingData(item, item2.code)
</uni-td>
</uni-tr>
</uni-table>
表头与表体两个数组的所需要的数据类型如下：
headNameData: [

name: "姓名",
code: "studentName"
,

name: "学号",
code: "studentId"
,

name: "成绩",
code: "record"
,
]

tbodyDataList: [

studentName: "张三",
studentId: "123456789",
record: "88"
,

studentName: "李四",
studentId: "234567891",
record: "95"
,

studentName: "王五",
studentId: "345678912",
record: "67"

]
headNameData数组里每个对象的code属性的属性值，正好是tbodyDataList数组里每个对象的key值,根据code拿到相应的值的方法如下：
processingData(item, code)
var showData = "";
if (code in item)
showData = item[code];

return showData;

code in item 的用法是：判断item对象中是否含有code属性(code这个key)，如果有，返回true，否则反之。 参考技术A uniapp table 组件使用说明 原创
2019-08-01 14:43:00
2点赞

艾特猫

码龄9年

关注
uni-app table 组件，no-bad-table组件
table uniapp 通用表格组件，让你方便专注数据和逻辑操作，而非jquery那样的处理DOM和各种兼容问题。

no-bad-table组件以及测试了ios，android，和微信小程序，其他小程序没有做过测试，理论上和微信小程序表现一致。

#插件市场更新会比github更新延后，插件市场地址

#插件市场更新会比github更新延后，[在线查看，电脑模拟和真实移动设备有区别]，在线查看会比github更新延后

#插件市场更新会比github更新延后，[查看github项目]

#插件市场更新会比github更新延后，[查看demo源码]

#插件市场更新会比github更新延后，[查看demo使用引入方式]

功能亮点(可点击查看源码):
行合并

列合并

固定table高度

数据加载

数据为空

自定义行样式

自定义某行样式

自定义某行某列某个单元格样式

使用插槽自定义单元格内容

数据多选操作

数据单选操作

数据删除&&数据编辑或者更多操作方式

固定右边一列

固定左边一列

固定高度不支持同时固定某一列

no-bad-table(uniapp table)效果预览:

uniapp table

uniapp 表格uniapp 表格

no-bad-table 是非常新且更新活跃的uni-app table 通用组件，且使用非常的简单

使用方式：
html只需要一行：<v-table :columns="columns" :list="data"></v-table>，充分解耦数据和DOM，让业务代码更好管理