【前端】vue3+ts+vite，el-table表格渲染记录重复情况

给自己一个目标，然后坚持一段时间，总会有收获和感悟！
在使用vue的过程中，总会遇到一些有疑问的地方，总结就能够加深印象，下次再出现的时候也有个参考的地方。

目录

一、常见属性

Element UI 的

el-table

组件是一个强大的表格组件，提供了许多常见的属性来配置和定制表格的外观和行为。

【下面是一些常见的

el-table

属性的介绍】

• data：表格的数据源，可以是一个数组或者一个接受 Promise 的函数。
• columns：定义表格的列配置，每个列配置使用 el-table-column 组件。
• border：是否显示表格边框，可选值为 true 或者 false。
• stripe：是否显示斑马纹样式，可选值为 true 或者 false。
• show-header：是否显示表格头部，可选值为 true 或者 false。
• highlight-current-row：是否高亮当前行，可选值为 true 或者 false。
• row-key：指定行的唯一标识符，用于优化渲染和追踪变化。
• size：表格的尺寸，可选值为 medium（默认值）、small 或者 mini。
• height：表格的高度，可以是一个固定值（如 "300px"）或者一个接受计算值的函数。
• max-height：表格的最大高度，超出部分会显示滚动条。
• index：是否显示索引列，可选值为 true 或者 false。
• fit：宽度是否自适应父元素，可选值为 true 或者 false。
• show-summary：是否在表尾显示总结行，可选值为 true 或者 false。
• sum-text：总结行的文本，用于自定义总结行的显示文案。

这里列举了一些常见的属性，如果你想了解更多的属性和配置，请参考 Element UI 的官方文档。

希望这些信息能够帮助到你！如果还有其他问题，请随时提问。

二、重复原因

一般会有两种原因
1）第一种是，本身数据源记录重复
2）第二种是，数据源返回10条，有2条id编号唯一标识重复
解决方法，想办法确保id标识唯一。
这里假设数据源中每个项都有一个唯一的 id 属性。你可以根据你的实际情况将 row.id 替换为你的唯一标识符的字段名。

• 例如：

<el-table:data="tableData":row-key="row => row.id"><!-- 表格列配置 --></el-table>

三、高阶用法

Element UI 的

el-table

组件提供了许多高级用法，可以帮助你更灵活地定制和使用表格。

【以下是一些常见的高级用法】

3.1、自定义列模板

通过

el-table-column

的

slot-scope

属性，可以自定义列的内容和样式。使用作用域插槽（Scoped Slots）来访问当前行的数据，可以实现更复杂的列模板。

<el-table:data="tableData"><el-table-columnprop="name"label="姓名"><templateslot-scope="scope"><spanstyle="color:{{scope.row.color}}">{{ scope.row.name }}</span></template></el-table-column></el-table>

3.2、自定义表头样式

通过

scopedSlots

属性，可以自定义表头的样式和内容。可以用作用域插槽来访问表头的数据，实现定制的表头模板。

<el-table:data="tableData"row-class-name="highlight-row"><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-button@click="deleteRow(scope.row)">删除</el-button></template></el-table-column></el-table>

3.3、自定义行样式和操作列

通过

row-class-name

属性，可以为行生成自定义的 CSS 类名，从而实现自定义的行样式。同时，可以在列配置中定义操作列，为每一行添加自定义的操作按钮或者功能。

3.4、分页和排序

通过

pagination

属性，可以为表格配置分页功能。设置

sort-by

和

sort-orders

属性可以启用表格的排序功能。

<el-table:data="tableData":pagination="true"><el-table-columnprop="name"label="姓名"sortable></el-table-column><el-table-columnprop="age"label="年龄"sortable></el-table-column><el-table-columnprop="gender"label="性别"sortable></el-table-column></el-table>

3.5、表格合并

通过

span-method

属性，可以自定义单元格的合并策略，用于实现表格的单元格合并。

<el-table:data="tableData"><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="department"label="部门":span-method="spanMethod"></el-table-column></el-table>

spanMethod({ row, column, rowIndex, columnIndex }){if(columnIndex ===2){if(row.department ==='HR'){return{rowspan:2,colspan:1};}if(row.department ==='Finance'){return{rowspan:0,colspan:0};}}}

3.6、自定义空数据提示

通过

empty-text

属性，可以设置表格数据为空时显示的自定义提示文本。

3.7、自定义加载状态

通过

loading

属性可以指定表格的加载状态，同时可以使用

loading-text

属性设置加载中的文本提示。

以上是一些常见的高级用法示例，Element UI 的

el-table

组件还提供了更多强大的功能和属性，可以根据具体需求进行定制。