2.0.3 • Published 5 years ago

vwant v2.0.3

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

vue表格组件

vue中ui框架table组件基本没有实现二级下拉表格,所以想要实现这个功能

案例效果:

示例

使用

npm安装:npm install vwant --save

  • 全局使用 一般在 webpack 入口页面 main.js 中如下配置:
import Vue from 'vue';
import vwant from 'vwant';
Vue.use(vwant);
  • 按需引用 借助插件babel-plugin-import可以实现按需加载组件,减少文件体积。首先安装,并在文件 .babelrc 中配置:

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "vwant",
    "libraryDirectory": "src/components"
  }]]
}

然后即可按需引入组件:

import { Table } from 'vwant';

api

本项目的样式及api参照iview框架,感谢iview开发团队

  • Table props
属性说明类型默认值
tableHeader表格列的配置描述,具体项见后文Array[]
tableItem显示的结构化数据Array[]
height表格高度,单位 px,设置后,如果表格内容大于此值,会固定表头Number,String-
  • tableHeader

列描述数据对象,是 tableHeader 中的一项

属性说明类型默认值
title列头显示文字String-
key对应列内容的字段名String-
width列宽String-
render自定义渲染列,使用 Vue 的 Render 函数。传入三个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引,详见示例。第三个为this对象Function-
children嵌套一层子列表数据对象,与tableHeader定义格式相同,对应参数与上面相同Array-
  • tableItem
属性说明类型默认值
children嵌套一层子列表数据,与tableItem定义格式相同Array-
  • table methods
方法名说明参数
showChildren展示下拉列表对应表格数组下标
2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.7

5 years ago

1.2.6

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.0

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago