el-table的序号自增不闪屏
时间: 2023-11-30 18:02:46 浏览: 32
为了让el-table的序号自增不闪屏,可以使用以下方法:
在el-table-column中添加属性::resizable="false",这样就可以避免序号列的宽度变化,从而避免闪屏的问题。
同时,还可以在el-table中添加属性::row-key="row => row.id",这样可以保证每一行的唯一性,从而避免序号重复的问题。
最终的代码如下所示:
<el-table v-loading="loading" :data="hrcEquipList" :row-key="row => row.id">
<el-table-column type="index" :index="hIndex" label="序号" width="120" :resizable="false" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="type" label="类型" />
</el-table>
相关问题
el-table 分页序号自增
可以通过设置 `index` 属性来实现 el-table 分页序号自增。具体做法是在 el-table-column 中设置 `type="index"`,如下所示:
```html
<el-table :data="tableData" :pagination="pagination">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
其中,`pagination` 是 el-pagination 组件的配置项,用于控制分页。`tableData` 是 el-table 的数据源。
vue3 el-table序号
在Vue3的el-table中展示序号可以使用`index`属性。具体方法如下:
```html
<template>
<el-table :data="tableData">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
}
}
</script>
```
在el-table-column中设置`type="index"`即可展示序号,同时可以设置`label`属性来自定义序号列的表头名称。