1、在table中显示图片- HTML2
<el-table-column
:show-overflow-tooltip="true"
label="照片">
<template slot-scope="scope"> <%--slot-scope="scope"相当于一行数据 --%>
<div class="demo-image__preview">
<el-image
style="width: 100px; height: 100px"
:src = "scope.row.portrait" <%--scope.row 该行下所有消息的对象 获取这一行数据中的图片字段--%>
:preview-src-list="srcList">
</el-image>
</div>
</template>
</el-table-column>
2、JS
var vm = new Vue({
el:'#app',
data:{
tableData: []
},
methods: {
dataInit:function(){
this.fnQuery();
},
fnQuery () {
let url = ''
let params = {...this.formData, pageNum: this.pageNum, page_size: this.pageSize, }
this.post(url, params, true, res => {
if (res.code == web_status.SUCCESS) {
let data = res.data
this.tableData = data.list
this.total = data.total
this.loading = false
} else {
this.loading = false
vm.$message.error(res.msg);
}
})
}
}
})