VUE--Element-UI在table表格中渲染图片、获取动态表格title和内容
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1、直接获取图片进行渲染
<!-- 直接渲染图片的方法 -->
<template>
<!-- 循环列表,用索引做key,便于插入数据管理(对应列内容字段名称) -->
<div v-for="item in iconImgInfos" :key="item.index" style="text-align:left;float: left">
<!-- 渲染图片iconImgInfos数组内有iconImgLarge键值,所以用遍历的值item.iconImgLarge获取数据 -->
<img :src="item.iconImgLarge" alt="图片加载失败" width="90px" height="90px" title="用戶頭像" style="text-align:left">
</div>
</template>
2、在table内获取图片进行渲染
<!-- 在表格内渲染图片的方法 -->
<template>
<!-- 获取服务端的图片数组iconImgInfos(列表类型)-->
<el-table :data="iconImgInfos" style="width: 100%">
<!-- 填写获取数组内图片的key值prop="iconImgLarge" -->
<el-table-column prop="iconImgInfos" label="头像图片">
<!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,用法参考 demo。 -->
<!-- slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template slot-scope="props"来获取插槽上的属性值,获取到的值是一个对象。 -->
<template slot-scope="scope">
<!-- scope.row获取当前行所有数据 作用域插槽获取当前行的数据(可以是图片连接如下::src="scope.row.iconImgLarge") -->
<el-image style="width: 50px; height: 50px" :src="scope.row.iconImgLarge" fit=""></el-image>
</template>
</el-table-column>
</el-table>
</template>
3、动态表格title及内容
<el-card>
<el-row>
<el-col>
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column :prop="item.column_name" :label="item.column_comment" :key="index"
v-if="item.column_name != 'id'">
</el-table-column>
</template>
</el-table>
</el-col>
</el-row>
</el-card>
script内:
<script>
export default {
data() {
return {
tableHead: [{
column_name: "column_name",
column_comment: "姓名"
},
{
column_name: "column_age",
column_comment: "年龄"
},
{
column_name: "column_sex",
column_comment: "性别"
}
],
tableData: [{
column_age: '3',
column_name: '张三',
column_sex: '女'
},
{
column_age: '3',
column_name: '李四',
column_sex: '女'
},
{
column_age: '3',
column_name: '王五',
column_sex: '女'
},
],
};
},
};
</script>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)