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

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语法的。