在el-table或table/tr/td单元格中添加div/span/img等组件

在el-table或table/tr/td单元格中添加div/span/img等组件

先贴效果图，如图所示，我是在单元格中添加了一个红色的点

1.el-table组件

<el-table :data="myList" :id="myTable" style="width: 100%">
     <el-table-column label="序号" align="center" prop="Id" width="100px">
          <template slot-scope="scope">
                    <div style="display: flex; align-items: center; justify-content: center;">
                        <span style="border-radius:50%;background-color:red;width: 10px;height: 10px;display: block;" v-show="scope.row.remarked">
                        </span>
                        {{ scope.row.Id }}
                    </div>
            </template>
      </el-table-column>
</el-table>

2.table组件

<table v-if="showTable">
   <tr>
       <td class="tdGridTitle" width="60px">序号</td>
   </tr>
   <tr v-for="item in myList">
       <td v-if="(item.code.match(/\./g) || []).length === 0" class="tdGridContext" style="text-align:center;" width="60px">
            <span v-show="item.remarked" style="border-radius: 50%; background-color: red; width: 10px; height: 10px; display: inline-block;">
            </span>
            {{ item.Id }}
        </td>
   </tr>

v-show当列表中的remarked参数为true时，才会展示红色小点，其他的组件同理，按需修改

---