SoFunction
Updated on 2025-04-03

vue3+ts+vite uses el-table table to render and record duplication

1. Common properties

Element UI'sel-tableComponents are a powerful table component that provides many common properties to configure and customize the appearance and behavior of tables.

【The following are some common onesel-tableIntroduction to attributes]

  • data: The data source of the table can be an array or a function that accepts a Promise.
  • columns: Define the column configuration of the table, and use each column configurationel-table-columnComponents.
  • border: Whether to display the table border, the optional value istrueorfalse。
  • stripe: Whether to display zebra pattern style, optional value istrueorfalse。
  • show-header: Whether to display the table header, the optional value istrueorfalse。
  • highlight-current-row: Whether to highlight the current line, the optional value istrueorfalse。
  • row-key: A unique identifier for a specified row, used to optimize rendering and track changes.
  • size: The size of the table, optional value ismedium(default value),smallormini。
  • height: The height of the table can be a fixed value (such as"300px") or a function that accepts calculated values.
  • max-height: The maximum height of the table, the scroll bar will be displayed if the exceeding part is displayed.
  • index: Whether to display the index column, the optional value istrueorfalse。
  • fit: Whether the width is adaptable to the parent element, the optional value istrueorfalse。
  • show-summary: Whether to display summary rows at the end of the table, the optional value istrueorfalse。
  • 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 about properties and configuration, please refer to the official documentation of Element UI.

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

2. Reasons for repetition

There are usually two reasons

1) The first is that the data source records are repeated

2) The second type is that the data source returns 10 items, and there are 2 id numbers and unique identifiers.

Solution: Find a way to make sure that the id identifier is unique.

Here it is assumed that each item in the data source has a unique id attribute. You can replace the field name with your unique identifier based on your actual situation.

  • For example:
<el-table :data="tableData" :row-key="row => ">
  <!-- Table column configuration -->
</el-table>

3. Advanced usage

Element UI'sel-tableComponents provide many advanced usages that can help you customize and use forms more flexibly.

【The following are some common advanced usage】

3.1. Custom column template

passel-table-columnofslot-scopeProperties, you can customize the content and style of the column. Using Scoped Slots to access the data of the current row, you can implement more complex column templates.

<el-table :data="tableData">
  <el-table-column prop="name" label="Name">
    <template slot-scope="scope">
      <span style="color: {{}}">{{  }}</span>
    </template>
  </el-table-column>
</el-table>

3.2. Customize the header style

passscopedSlotsProperties, you can customize the style and content of the table header. You can use a scope slot to access the data of the table header to implement a customized header template.

<el-table :data="tableData" row-class-name="highlight-row">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column label="operate">
<template slot-scope="scope">
<el-button @click="deleteRow()">delete</el-button>
</template>
</el-table-column>
</el-table>

3.3. Custom row styles and operation columns

passrow-class-nameProperties, you can generate custom CSS class names for rows, thereby implementing custom row styles. At the same time, you can define the action column in the column configuration and add custom action buttons or functions to each row.

3.4. Pagination and sorting

passpaginationProperties, you can configure paging functions for tables. set upsort-byandsort-ordersProperties can enable the sorting function of tables.

<el-table :data="tableData" :pagination="true">
<el-table-column prop="name" label="Name" sortable></el-table-column>
<el-table-column prop="age" label="age" sortable></el-table-column>
<el-table-column prop="gender" label="gender" sortable></el-table-column>
</el-table>

3.5. Table merger

passspan-methodProperties, you can customize the cell merging strategy and use it to realize cell merging of tables.

<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="age"></el-table-column>
<el-table-column prop="department" label="department" :span-method="spanMethod"></el-table-column>
</el-table>

spanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) {
if ( === 'HR') {
return {
rowspan: 2,
colspan: 1
};
}
if ( === 'Finance') {
return {
rowspan: 0,
colspan: 0
};
}
}
}

3.6. Custom empty data prompts

passempty-textProperties, you can set the custom prompt text displayed when the table data is empty.

3.7. Custom loading status

passloadingAttributes can specify the loading status of the table, and can also be usedloading-textProperties set text prompts in loading.

The above are some common advanced usage examples, from Element UIel-tableComponents also provide more powerful functions and attributes that can be customized according to specific needs.

Summarize

This is the article about vue3+ts+vite using el-table table rendering to record duplication. For more related vue3 el-table table rendering, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!