給自己一個目標，然后堅持一段時間，總會有收獲和感悟！
在使用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
};
}
}
}

3.6、自定義空數據提示

通過 empty-text 屬性，可以設置表格數據為空時顯示的自定義提示文本。

3.7、自定義加載狀態

通過 loading 屬性可以指定表格的加載狀態，同時可以使用 loading-text 屬性設置加載中的文本提示。

以上是一些常見的高級用法示例，Element UI 的 el-table 組件還提供了更多強大的功能和屬性，可以根據具體需求進行定制。