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>