[Front-end] vue3+ts+vite, el-table table rendering record duplication

Give yourself a goal and stick to it for a while, and you will always gain something and gain insights!
In the process of using vue, you will always encounter some doubtful points. A summary can deepen your impression and provide a reference next time.

1. Common attributes

The Element UI's el-table component is a powerful table component that provides many common properties to configure and customize the appearance and behavior of the table.

[The following is an introduction to some common el-table attributes]

• data: The data source of the table, which can be an array or a function that accepts Promise.
• columns: Define the column configuration of the table, each column configuration uses the el-table-column component.
• border: Whether to display the table border, the optional value is true or false.
• stripe: Whether to display the zebra pattern, the optional value is true or false.
• show-header: Whether to display the table header, the optional value is true or false.
• highlight-current-row: Whether to highlight the current line, the optional value is true or false.
• row-key: Specifies a unique identifier for the row, used to optimize rendering and track changes.
• size: The size of the table, the optional values ​​are medium (default value), small or mini.
• height: The height of the table, which can be a fixed value (such as "300px") or a function that accepts a calculated value.
• max-height: The maximum height of the table. Scroll bars will be displayed beyond the height.
• index: Whether to display the index column, the optional value is true or false.
• fit: Whether the width is adaptive to the parent element, the optional value is true or false.
• show-summary: Whether to display the summary row at the end of the table, the optional value is true or false.
• sum-text: The text of the summary line, used to customize the display copy of the summary line.

Here are some common properties. If you want to know more properties and configurations, please refer to the official documentation of Element UI.

Hope this information can help you! If you have any further questions, please feel free to ask.

2. Reasons for duplication

There are generally two reasons
1) The first is that the data source records are duplicated
2) The second is that the data source 10 items are returned, 2 of which have duplicate ID numbers and unique identifiers
. The solution is to find a way to ensure that the ID identifiers are unique.
This assumes that each item in the data source has a unique id attribute. You can replace row.id with the field name of your unique identifier according to your actual situation.

• For example:

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

3. Advanced usage

The Element UI's el-table component provides many advanced usages that can help you customize and use tables more flexibly.

[The following are some common advanced usages]

3.1. Custom column template

The content and style of the column can be customized through the attributes of el-table-column. More complex column templates can be implemented using scoped slots to access the data of the current row. slot-scope

<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. Customize header style

Through the scopedSlots attribute, you can customize the style and content of the header. Scope slots can be used to access header data to implement customized header templates.

<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. Customize row styles and operation columns

Through the row-class-name attribute, you can generate a custom CSS class name for the row to implement a custom row style. At the same time, you can define operation columns in the column configuration and add customized operation buttons or functions to each row.

3.4. Paging and sorting

Paging function can be configured for the table through pagination attribute. Setting the sort-by and sort-orders properties enables sorting of the table.

<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. Table merging

Through the span-method attribute, you can customize the cell merging strategy to achieve table cell merging.

<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. Customize empty data prompts

With the empty-text attribute, you can set the custom prompt text that is displayed when the table data is empty.

3.7. Customized loading status

You can specify the loading status of the table through the loading attribute, and you can use the loading-text attribute to set the text prompt during loading.

The above are some common advanced usage examples. Element UI's el-table component also provides more powerful functions and properties that can be customized according to specific needs.