vue+element-ui之表格中如何插入图片链接
1. 首先看下要实现的效果图: 2. 相关的代码(红色部分)<el-table:data="banner"style="width: 100%"><el-table-columnprop="id"label="ID"sortablewidth="180&qu
·
1. 首先看下要实现的效果图:
2. 相关的代码(红色部分)
<el-table
:data="banner"
style="width: 100%"
>
<el-table-column
prop="id"
label="ID"
sortable
width="180">
</el-table-column>
<el-table-column
prop="imgDiscrete"
label="图片描述"
sortable
width="180">
</el-table-column>
<el-table-column
prop="isEnable"
label="是否可用"
sortable
width="180">
<template slot-scope="scope">
<span v-if="scope.row.isEnable==0">不可用</span>
<span v-if="scope.row.isEnable==1">可用</span>
</template>
</el-table-column>
<el-table-column
prop="imgPath"
label="图片路径"
sortable
width="180">
<!--插入图片链接的代码-->
<template slot-scope="scope">
<img :src="scope.row.imgPath" alt="" style="width: 50px;height: 50px">
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="success"
@click.native.prevent="myedit(scope.$index,banner)">编辑</el-button>
<el-button
size="mini"
type="success"
@click.native.prevent="mydel(scope.$index,banner)">删除</el-button>
</template>
</el-table-column>
</el-table>
更多推荐
已为社区贡献1条内容
所有评论(0)