美文网首页
uniapp uni-table 遍历数组

uniapp uni-table 遍历数组

作者: 李赫尔南 | 来源:发表于2022-06-22 09:19 被阅读0次

用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,否则反之。

相关文章

  • angular2foreach遍历的几种用法

    遍历简单的数组 遍历数组对象 遍历嵌套数组

  • VS常用四种遍历数组的方法

    目录 for 遍历数组 for in 遍历数组 for of 遍历数组 forEach遍历数组 优缺点总结原文:h...

  • foreach/forin

    1.for/in遍历属性,数组是遍历下标 for/each遍历属性值,数组遍历数组的值

  • JS数组遍历的三种常用方法

    1.数组下标遍历 数组下标遍历是最常用也最普通的数组遍历方式 例如: 2.for in遍历 for in是根据数组...

  • for_of循环

    for(let value of target){}循环遍历 遍历数组 遍历Set 遍历Map 遍历字符串 遍历伪数组

  • PHP中的数组

    数组分类 索引数组 关联数组 数组遍历 传值遍历 传址遍历 数组函数 指针操作函数 current($array)...

  • Go的数组和指针

    一、 定义数组 二、 遍历数组 下标遍历 range遍历(index) range遍历(index,value) ...

  • forEach、for-in与for-of的区别

    遍历数组推荐for of ,遍历对象推荐 for in for in可以用来便利数组和对象 for in在遍历数组...

  • 6.v-for指令

    1.v-for 遍历数组: 遍历对象数组: 遍历对象: 遍历数据 2.key属性:

  • Scala数组操作

    1. 定长数组 2. 变长数组:数组缓冲 3. 遍历数组和数组缓冲 利用下标来进行遍历 不需要数组下标遍历 总结一...

网友评论

      本文标题:uniapp uni-table 遍历数组

      本文链接:https://www.haomeiwen.com/subject/rdpyurtx.html