npm i el-table-extends -S
import ElTableExtends from 'el-table-extends';
Vue.use(ElTableExtends);
插件基于elementUI中el-table进行扩展,使用方法一样,插件中扩展如下:
属性:
* 修改highlightCurrentRow默认值为true
* 新增rowHeight: number 设置行高,默认为32
* 新增appendNumber: number 容器额外渲染的的记录,数值越大效果越好,但是越耗性能,默认为15
方法:
* setCurrentRowIndex(index: number): void 根据index设置当前行
* scrollToRow(index: number, offset: number): Promise<boolean> 滚动到指定index处,index为指定行索引,offset为距离顶部高度,默认为当前显示容器高度一半
示例:
<template>
<el-table-extends
ref="table"
:data="list"
:height="100%"
:row-height="25"
:appendNumber="15"
size="mini"
...
>
<el-table-column type="index" width="80"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="age" label="年龄"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
...
</el-table-extends>
</template>
<script>
export default {
mounted () {
this.$refs.table.scrollToRow(this.index);
this.$refs.table.setCurrentRowIndex(this.index - 1);
}
}
</script>