实现功能

实现一个如果数据充足,则会无线向右延申

利用Element-ui的多级表头实现,由于里面行数需要根据数据的多少确定,所以需要通过v-for实现

但是利用了v-for结果并不显示

这是因为Element-ui的prop属性对应你返回的属性名字

解决做法

添加

   <el-table-column label="速" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tableData[index].name }}</span>
          </template>
        </el-table-column>
<el-table v-loading="loading" :data="postdataList">
      <el-table-column label="" align="center" prop="dataName" />
      <el-table-column label="" align="center" prop="dataClass" />
      <el-table-column
        align="center"
        v-for="(item, index) in postdataList[0].tableData"
        :key="index"
        :label="item.date"
      >
        <el-table-column label="速" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tableData[index].name }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

上面用postdataList[0].tableData代替表头是因为各个数据的表头是一样的。也就是说postdataList[0]和postdataList[1]……公用一个表头

数据类型

   // 请求数据设置表格数据
      postdataList: [
        {
          dataName: 11,
          dataClass: 11,
          tableData: [
            {
              date: "2016-05-02",
              name: "王小虎",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
              zip: 200333,
              tag: "家"
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1517 弄",
              zip: 200333,
              tag: "公司"
            }        
          ]
        },
        {
          dataName: 11,
          dataClass: 11,
          tableData: [
            {
              date: "2016-05-02",
              name: "王www",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
              zip: 200333,
              tag: "家"
            },
            {
              date: "2016-05-04",
              name: "王qqq",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1517 弄",
              zip: 200333,
              tag: "公司"
            }
            
          ]
        }

 

GitHub 加速计划 / eleme / element
15
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐