项目场景：

vue表格显示图片，采用element ui实现

  <template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /><el-table-column prop="img" label="图片" width="100"><template v-slot:default="scope"><el-image :src="scope.row.img"/></template></el-table-column></el-table></template><script lang="ts" >
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',img: '/image/cover1.png'},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',img: '/image/cover2.png'},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',img: '/image/cover2.png'},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',img: '/image/cover1.png'},
]
export default {name: "showpicture",data(){return{tableData}}
}
</script><style scoped></style>

流程描述：

首先定义一个数组tableData，然后return这个数组，采用element的表格模板，需要注意的是el-table-column标签包裹着el-image图片显示标签，但是由于作用域插槽只允许在template模板使用，所以el-image图片显示标签外加一层template模板标签，在vue3中作用域插槽为
v-slot:default=“scope”，scope是随意起的名字，该作用域插槽的含义可以解释为scope内含有el-table-column标签的全部属性采用格式scope.row.img调用。

<el-table-column prop="img" label="图片" width="100"><template v-slot:default="scope"><el-image :src="scope.row.img"/></template></el-table-column>

vue表格显示图片，采用element ui实现相关推荐

vue学习笔记-关于element ui 安装失败的问题解决
今天学习vue时,对element ui进行安装,运行npm install element-ui -S 命令,出现报错: npm ERR! code ERESOLVE npm ERR! ERESOL ...
使用UI创建vue项目并添加element ui和axios
目录简介 Vue简单安装说明项目创建步骤总结简介因为最近一个项目需要使用SPA的方式,而前端选择使用vue来实现.所以最近重新看了下vue的相关知识,发现最新的vue项目可以在web中使用界 ...
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单使用记录 element ui 表单 input 文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式 ...
vue安装并导入Element UI
首先,在Vue项目的终端输入:npm i element-ui -S (输入之后,回车,等待一会儿,就会出现下图红框以下的内容,表示已经安装成功) 然后,在main.js中添加: import Ele ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
vue加载动画element ui V-loading属性踩坑记录
根据需求,由预览按钮打开弹窗,且弹窗需要渲染的数据较多,渲染的速度比较慢,所以要加一个加载中的效果,element ui的 v-loading属性就正好可以解决这一需求,但是当加入这一属性之后发现,是 ...
class vue 添加图片_vue+element 添加图片组件
添加图片效果图微信截图_20200630144419.png 微信截图_20200630144532.png 由于该组件在页面中使用位置广泛,一但在dialog中使用便会发生错误,故未添加预览功能 ...
VUE element UI 搭建
VUE的环境安装这里就不多说了,我们直接开始element UI的安装. 第零步:在自己的git仓库中,先新建一个项目推荐使用开源中国的码云:Gitee - 基于 Git 的代码托管和研发协作平台 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...

vue表格显示图片，采用element ui实现

项目场景：

流程描述：

vue表格显示图片，采用element ui实现相关推荐

最新文章

热门文章