一、常見屬性

Element UI 的 el-table 組件是一個強大的表格組件，提供了許多常見的屬性來配置和定制表格的外觀和行為。

【下面是一些常見的 el-table 屬性的介紹】

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

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

希望這些信息能夠幫助到你！如果還有其他問題，請隨時提問。

二、重復原因

一般會有兩種原因

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

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

解決方法，想辦法確保id標識唯一。

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

• 例如：

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

三、高階用法

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

【以下是一些常見的高級用法】

3.1、自定義列模板

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

<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 屬性，可以自定義表頭的樣式和內(nèi)容?？梢杂米饔糜虿宀蹃碓L問表頭的數(shù)據(jù)，實現(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、自定義行樣式和操作列

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

3.4、分頁和排序

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

通過 span-method 屬性，可以自定義單元格的合并策略，用于實現(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="部門" :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ù)提示

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

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

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

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

總結(jié) 

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

最新評論