【前端】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-column prop="name" label="姓名"><template slot-scope="scope"><span style="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-column prop="name" label="姓名"></el-table-column>
<el-table-column label="操作">
<template slot-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-column prop="name" label="姓名" sortable></el-table-column>
<el-table-column prop="age" label="年龄" sortable></el-table-column>
<el-table-column prop="gender" label="性别" sortable></el-table-column>
</el-table>

3.5、表格合并

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

<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="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
};
}
}
}