<el-table :data="tableData" style="width: 100%" height="568px" @selection-change="handleSelectionChange" ref="table">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="photo" label="照片" width="300">
<template slot-scope="scope">
<img :src="scope.row.src" alt="" srcset="" style="width:50px;height:50px;">
</template>
</el-table-column>
<el-table-column prop="password" label="密码" width="180">
</el-table-column>
</el-table>
调取列表接口填充数据,图片是二进制byte[]存放在数据库的;列表返回也是二进制;
一种;直接调取单独http请求返回图片,
created() {
this.netAPI = NetAPI().get("device_administrator");
this.$http.get(this.netAPI.find).then(
res => {
this.tableData = res.body.data;
for (let item of res.body.data) {
item.src = this.netAPI.fileImg + item.id;
}
},
err => {}
);
},
二种;拿到列表里面的图片二进制直接放在img里面显示,需要设置头
created() {
this.netAPI = NetAPI().get("device_administrator");
this.$http.get(this.netAPI.find).then(
res => {
this.tableData = res.body.data;
for (let item of res.body.data) {
item.src = "data:image/jpg;base64,"+item.photo;
}
},
err => {}
);
},