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>