@wangankeji/vue-rolltable NPM

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>

core-js vue

@infinitebrahmanuniverse/nolb-_wan @everything-registry/sub-chunk-999 @zalastax/nolb-_wan

0.3.1

3 years ago