给自己一个目标，然后坚持一段时间，总会有收获和感悟！
在使用vue的过程中，总会遇到一些有疑问的地方，总结就能够加深印象，下次再出现的时候也有个参考的地方。
目录
- 一、常见属性
- 二、重复原因
- 三、高阶用法
- 3.1、自定义列模板
- 3.2、自定义表头样式
- 3.3、自定义行样式和操作列
- 3.4、分页和排序
- 3.5、表格合并
- 3.6、自定义空数据提示
- 3.7、自定义加载状态
一、常见属性
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};}}}3.6、自定义空数据提示
通过 empty-text 属性，可以设置表格数据为空时显示的自定义提示文本。
3.7、自定义加载状态
通过 loading 属性可以指定表格的加载状态，同时可以使用 loading-text 属性设置加载中的文本提示。
以上是一些常见的高级用法示例，Element UI 的
el-table组件还提供了更多强大的功能和属性，可以根据具体需求进行定制。