el-table中的使用formatter属性的让表格单元内显示图片

最新推荐文章于 2024-07-01 16:42:29 发布

尼给路达哟

最新推荐文章于 2024-07-01 16:42:29 发布

阅读量2.3k

点赞数

分类专栏： element 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/m0_55336994/article/details/121166869

版权

element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue的el-table组件中利用formatter属性来格式化表格内容，不仅限于文字数据的修改，还展示了如何插入HTML代码以显示图片。通过使用JSX语法，实现了动态绑定img标签的src属性，从而在表格单元格中展示用户头像。

摘要由CSDN通过智能技术生成

el-table中的使用formatter属性的让表格单元显示图片

el-table的formatter这个属性很厉害，可以用来修改很多东西。官方文档只是说了可以格式话内容
在这里插入图片描述
但是再项目开发中想试着不仅仅只是数据的改变呢，可不可以插入html呢？
可不可以插入html后如img标签后给动态绑定src地址呢？
我试了下用JSX语法可行！

上代码看更直观：

html中

 <el-table ref="prizeTableData" :data="tableData" >
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
              <template v-for="item in tableColumns" >
                <el-table-column
                  v-if="item.isShow"
                  :key="item.prop"
                  :prop="item.prop"
                  :label="item.label"
                  :show-overflow-tooltip="item.overflow"
                  :formatter="item.formatter"
                  :width="item.width"
                  :sortable="item.sortable"
                >
                </el-table-column>
              </template>
              <div slot="empty">
                <no-search msg="暂无搜索结果"></no-search>
              </div>
  </el-table>

js中

export default {
    data() {
      return {
        tableColumns: [
          {
            isShow: true,
            label: '用户',
            overflow: true,
            width:150,
            formatter: (row, column) => {
                let d=<div style="display:flex;align-items:center">
                     <img style="width:50px;height:50px;border-radius:50%;" src=	    {row.userImage} />
                    <div style="margin-left:5px">{row.nickName}</div>
                  </div>
                 return d;
            },
          ],
          }
          }

vue中也是可以使用jsx语法的。