el-table 循环分别表头以及内容 判断循环图片带分页器

el-table 循环分别表头以及内容 判断循环图片带分页器

记录一下在使用el-table的时候需要从后台拿到图片数据循环到表格上，遇见了图片循环不上的去问题，现已解决。

话不多说，上代码

<template>
  <div class="">
    <!-- 表格 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @current-change="tableCurrentChange"
    >
      <template v-for="(item, index) in cols">
        <el-table-column :key="index" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <span v-if="item.label !== '铭牌照片' && item.label !== '地点照片'">
              {{ scope.row[item.prop] }}
            </span>
            <el-image
              v-if="item.label == '地点照片'"
              :src="scope.row.address"
              style="width: 40px; height: 40px"
              :preview-src-list="scope.row.addressList"
            />
            <el-image
              v-if="item.label == '铭牌照片'"
              :src="scope.row.url"
              style="width: 40px; height: 40px"
              :preview-src-list="scope.row.urlList"
            />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        // 表内容
        tableData: [
          {
            id: 1,
            date: '2016-05-02',
            name: '王1虎',
            address:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            url:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            addressList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
            urlList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
          },
          {
            id: 2,
            date: '2016-05-04',
            name: '王2虎',
            address:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            url:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            addressList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
            urlList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
          },
          {
            id: 3,
            date: '2016-05-01',
            name: '王3虎',
            address:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            url:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            addressList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
            urlList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
            children: [
              {
                id: 31,
                date: '2016-05-01',
                name: '王31虎',
                address:
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                url:
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                addressList: [
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                ],
                urlList: [
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                ],
              },
              {
                id: 32,
                date: '2016-05-01',
                name: '王32虎',
                address:
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                url:
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                addressList: [
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                ],
                urlList: [
                  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                ],
              },
            ],
          },
          {
            id: 4,
            date: '2016-05-03',
            name: '王4虎',
            address:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            url:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            addressList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
            urlList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
          },
          {
            id: 5,
            date: '2016-05-02',
            name: '王1虎',
            address:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            url:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            addressList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
            urlList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
          },
        ],
        // 表头
        cols: [
          {
            label: '时间',
            prop: 'date',
          },
          {
            label: '姓名',
            prop: 'name',
          },
          {
            label: '地点照片',
            prop: 'address',
          },
          {
            label: '铭牌照片',
            prop: 'url',
          },
        ],
        // 分页器
        pageSize: 10,
        currentPage: 1,
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
        this.pageSize = val
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.currentPage = val
      },
      // 单击获取一行数据
      tableCurrentChange(val) {
        console.log(val)
      },
    
    },
  }
</script>
<style lang="scss" scoped>
  .el-table {
    width: 100%;
    text-align: center;
  }
  .pagination {
    position: relative;
    top: 0px;
  }
</style>