在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时,才会展示红色小点,其他的组件同理,按需修改