给自己一个目标，然后坚持一段时间，总会有收获和感悟！

在使用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 替换为你的唯一标识符的字段名。

      • 例如：

        三、高阶用法

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

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

        3.1、自定义列模板

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

        3.2、自定义表头样式

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

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

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

        3.4、分页和排序

        通过 pagination 属性，可以为表格配置分页功能。设置 sort-by 和 sort-orders 属性可以启用表格的排序功能。

        3.5、表格合并

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

        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 组件还提供了更多强大的功能和属性，可以根据具体需求进行定制。