el-table中序号后面加已读未读红点标识代码实现
时间: 2024-10-19 09:11:06 浏览: 15
在Element UI的`el-table`中添加已读未读状态的红点标识通常是通过数据绑定和自定义插槽来实现的。首先,你需要在数据结构中包含一个表示是否已读的状态字段。然后,在表格的列模板里,你可以创建一个自定义组件或者直接插入HTML。
这里是一个简单的示例:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<span v-if="scope.row.isRead">{{ scope.$index + 1 }}·</span>
<span class="unread-dot" v-else>?</span>
<!-- 添加其他操作按钮 -->
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, isRead: true },
{ id: 2, isRead: false },
// 更多行...
]
};
}
};
</script>
<style scoped>
.unread-dot::before {
content: '\2714'; /* 红色对勾 */
color: red;
}
</style>
```
在这个例子中,如果`isRead`属性为`true`,则显示红色圆点,表示已读;如果为`false`,则显示问号表示未读。`slot-scope`用于获取当前行的数据上下文,`v-if`和`v-else`用于条件渲染已读和未读的标识。
阅读全文