怎么把el-table-column中的template中的el-image里的图片变成圆形

可以在el-table-column的template中使用CSS的border-radius属性来将el-image中的图片变成圆形，代码如下：

<el-table-column prop="image" label="图片">
  <template slot-scope="scope">
    <el-image :src="scope.row.image" style="border-radius: 50%"></el-image>
  </template>
</el-table-column>

这样就可以将el-image中的图片变成圆形了。

相关问题

<el-table :data="tableData" stripe size="medium" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="goodName" label="图书名称"></el-table-column> <el-table-column prop="price" label="图书单价"></el-table-column> <el-table-column prop="num" label="图书数量"></el-table-column> <el-table-column prop="img" label="图片"> <template v-slot="scope"> <el-image :src="scope.row.img" style="width: 100px; height: 100px"></el-image> </template> </el-table-column> 添加注释

这是一个使用了 Element UI 中的 el-table 组件展示数据的代码片段，其中：

- data 属性绑定了一个名为 tableData 的数组，用于存储要展示的数据。
- stripe 属性设置为 true，表示表格显示斑马线样式。
- size 属性设置为 medium，表示表格大小为中等。
- @selection-change 事件绑定了一个名为 handleSelectionChange 的方法，用于处理表格中选中行的变化。
- el-table-column 组件用于定义表格的列，其中 type="selection" 表示该列为复选框列，prop 属性指定了该列对应数据对象的属性名，label 属性指定了该列的表头名称，width 属性设置了该列的宽度，sortable 属性设置为 true，表示该列可以排序。
- 在第四列中，添加了一个插槽（slot），用于自定义该列的内容。在该插槽中，使用了 el-image 组件展示了图片。通过 scope.row.img 获取了该行数据对象中 img 属性的值，并将其作为 el-image 组件的 src 属性值。

<el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column label="图片"><template slot-scope="scope"><el-image style="width: 100px; height: 100px" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image></template></el-table-column> <el-table-column prop="link" label="图书链接"></el-table-column> <el-table-column prop="goodsId" label="图书id"></el-table-column> <el-table-column prop="goodsName" label="图书名称"></el-table-column> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button> <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)" > 添加注释

这是一个使用 Element UI 的表格组件，其中包含了多个列，每个列对应着表格中的一列数据。其中第一个列使用了 `type="selection"`，表示可以选择多行数据。第二到第六列分别是 ID、图片、图书链接、图书 ID 和图书名称。最后一列是操作列，包含了一个编辑按钮和一个删除按钮，当点击删除按钮时，会触发 `del` 方法。同时，这个表格还监听了 `selection-change` 事件，当选择的行发生变化时，会触发 `handleSelectionChange` 方法。