vue3+ts+vite使用el-table表格渲染记录重复情况

一、常见属性

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 组件还提供了更多强大的功能和属性，可以根据具体需求进行定制。

总结 

到此这篇关于vue3+ts+vite使用el-table表格渲染记录重复情况的文章就介绍到这了,更多相关vue3 el-table表格渲染重复内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论