实现功能

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

利用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
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
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 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐