el-table-extends
TypeScript icon, indicating that this package has built-in type declarations

0.1.8 • Public • Published

el-table-extends

安装

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>

Readme

Keywords

none

Package Sidebar

Install

npm i el-table-extends

Weekly Downloads

0

Version

0.1.8

License

MIT

Unpacked Size

2.99 MB

Total Files

12

Last publish

Collaborators

  • chenweigen