用uni-table插件来生成table,是通过遍历数组生成你所需的table,主要代码如下:
<view class="table-contents">
<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>
</view>
表头与表体两个数组的所需要的数据类型如下:
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,否则反之。








网友评论