@wangankeji/vue-rolltable

roll-table

基于 Vue2 的滚动表格。

安装

yarn add @wangankeji/vue-rolltable

用法

<template>
  <roll-table :data="data" :cols="cols"/>
</template>
<script>
import RollTable from '@wangankeji/vue-rolltable'

export default {
  components: {RollTable},
  data() {
    return {
      cols: [{
        title: 'ID',
        field: 'id',
        component: 'YourComponent'
      }, ...{}]
    }
  }
}
</script>

属性

名称	类型	默认值	描述
cols	array	-	列定义。详见 列定义
data	array	-	数据
show-header	boolean	true	是否显示表头
header-size	string	32px	表头高度
interval	number	5000	滚动时间间隔，单位为 毫秒，设置为0以禁用滚动
name	string	clip	动画名称。详见 动画
duration	number	1000	动画时长，单位为 毫秒，设置为0以禁用动画
func	string	ease-in	动画函数名称，其用于指定 animation-timing-function
row-gap	string	0	指定行间距
row-class	string/array/object/function	-	行的样式
row-component	string/object/Vue	-	自定义行渲染组件
row-height	string	-	指定行高
no-wrap	boolean	false	单元格内容强制不换行
header-style	string/object	-	表头样式
header-class	string/object/array	-	表头样式类

row-class 为函数时的参数:

e = {
  data: Array,
  row: Object,
  rowIndex: Number
}

列定义

表格由多个列组成，每个列的定义如下：

名称	类型	描述
field	string	字段名称
title	string	标题(可选)
align	string	内容列对齐方式，可选值为 left/center/right，不指定时为 left(可选)
headerAlign	string	头部列对齐方式，不指定时为 center(可选)
width	string/number	列宽度(可选)
style	object	内容列的样式定义(可选)
headerStyle	object	标题列的样式定义(可选)
component	string/object/Vue	自定义渲染组件(可选)
render	function	自定义渲染html(可选)

width 当有列未指定宽度时，那么这些列平分剩下的宽度。

component 用于使用自定义组件来渲染某个单元格，应当包含以下属性(Props)：

const YourComponent = {
  props: {
    column: Object,
    data: Array,
    row: Object,
    rowIndex: Number,
    colIndex: Number,
    value: Any
  }
}

render 用于自定义 html 渲染单元格，其参数为一个对象，结构如下：

e = {
  column: Object,
  data: Array,
  row: Object,
  rowIndex: Number,
  colIndex: Number,
  value: Any
}

render 应该始终返回一个字符串。

• data 行数据对象
• column 列定义
• rowIndex 行号
• colIndex 列号
• value 为单元格的值

动画

组件内置了一些动画:

• top
• left
• right
• opacity
• height
• scale
• top-shake
• clip
• fall

这些名称作为属性值传给 <roll-table animation-name="clip" />

也可以自定义动画，只需要将自定义动画的名称直接传给 animation-name 即可。

自定义动画名称不得与内置名称重复。

如:

<template>
  <roll-table animation-name="your-animation"/>
</template>
<style>
@keyframes your-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>