2.0.3 • Published 5 years ago
vwant v2.0.3
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