一、常見(jiàn)屬性

Element UI 的 el-table 組件是一個(gè)強(qiáng)大的表格組件，提供了許多常見(jiàn)的屬性來(lái)配置和定制表格的外觀和行為。

【下面是一些常見(jiàn)的 el-table 屬性的介紹】

• data：表格的數(shù)據(jù)源，可以是一個(gè)數(shù)組或者一個(gè)接受 Promise 的函數(shù)。
• columns：定義表格的列配置，每個(gè)列配置使用 el-table-column 組件。
• border：是否顯示表格邊框，可選值為 true 或者 false。
• stripe：是否顯示斑馬紋樣式，可選值為 true 或者 false。
• show-header：是否顯示表格頭部，可選值為 true 或者 false。
• highlight-current-row：是否高亮當(dāng)前行，可選值為 true 或者 false。
• row-key：指定行的唯一標(biāo)識(shí)符，用于優(yōu)化渲染和追蹤變化。
• size：表格的尺寸，可選值為 medium（默認(rèn)值）、small 或者 mini。
• height：表格的高度，可以是一個(gè)固定值（如 "300px"）或者一個(gè)接受計(jì)算值的函數(shù)。
• max-height：表格的最大高度，超出部分會(huì)顯示滾動(dòng)條。
• index：是否顯示索引列，可選值為 true 或者 false。
• fit：寬度是否自適應(yīng)父元素，可選值為 true 或者 false。
• show-summary：是否在表尾顯示總結(jié)行，可選值為 true 或者 false。
• sum-text：總結(jié)行的文本，用于自定義總結(jié)行的顯示文案。

這里列舉了一些常見(jiàn)的屬性，如果你想了解更多的屬性和配置，請(qǐng)參考 Element UI 的官方文檔。

希望這些信息能夠幫助到你！如果還有其他問(wèn)題，請(qǐng)隨時(shí)提問(wèn)。

二、重復(fù)原因

一般會(huì)有兩種原因

1）第一種是，本身數(shù)據(jù)源記錄重復(fù)

2）第二種是，數(shù)據(jù)源返回10條，有2條id編號(hào)唯一標(biāo)識(shí)重復(fù)

解決方法，想辦法確保id標(biāo)識(shí)唯一。

這里假設(shè)數(shù)據(jù)源中每個(gè)項(xiàng)都有一個(gè)唯一的 id 屬性。你可以根據(jù)你的實(shí)際情況將 row.id 替換為你的唯一標(biāo)識(shí)符的字段名。

• 例如：

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

三、高階用法

Element UI 的 el-table 組件提供了許多高級(jí)用法，可以幫助你更靈活地定制和使用表格。

【以下是一些常見(jiàn)的高級(jí)用法】

3.1、自定義列模板

通過(guò) el-table-column 的 slot-scope 屬性，可以自定義列的內(nèi)容和樣式。使用作用域插槽（Scoped Slots）來(lái)訪問(wèn)當(dāng)前行的數(shù)據(jù)，可以實(shí)現(xiàn)更復(fù)雜的列模板。

<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、自定義表頭樣式

通過(guò) scopedSlots 屬性，可以自定義表頭的樣式和內(nèi)容?？梢杂米饔糜虿宀蹃?lái)訪問(wèn)表頭的數(shù)據(jù)，實(shí)現(xiàn)定制的表頭模板。

<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、自定義行樣式和操作列

通過(guò) row-class-name 屬性，可以為行生成自定義的 CSS 類(lèi)名，從而實(shí)現(xiàn)自定義的行樣式。同時(shí)，可以在列配置中定義操作列，為每一行添加自定義的操作按鈕或者功能。

3.4、分頁(yè)和排序

通過(guò) pagination 屬性，可以為表格配置分頁(yè)功能。設(shè)置 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、表格合并

通過(guò) span-method 屬性，可以自定義單元格的合并策略，用于實(shí)現(xiàn)表格的單元格合并。

<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="部門(mén)" :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、自定義空數(shù)據(jù)提示

通過(guò) empty-text 屬性，可以設(shè)置表格數(shù)據(jù)為空時(shí)顯示的自定義提示文本。

3.7、自定義加載狀態(tài)

通過(guò) loading 屬性可以指定表格的加載狀態(tài)，同時(shí)可以使用 loading-text 屬性設(shè)置加載中的文本提示。

以上是一些常見(jiàn)的高級(jí)用法示例，Element UI 的 el-table 組件還提供了更多強(qiáng)大的功能和屬性，可以根據(jù)具體需求進(jìn)行定制。

總結(jié) 

到此這篇關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的文章就介紹到這了,更多相關(guān)vue3 el-table表格渲染重復(fù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論