vue-table-with-tree-grid-refit
vue-table-with-tree-grid-refit
A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)
Example
Installation
Use npm:
npm i vue-table-with-tree-grid-refit -S
Or use yarn:
yarn add vue-table-with-tree-grid-refit
Usage
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid-refit'
Vue.use(ZkTable)
Or
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid-refit'
Vue.component(ZkTable.name, ZkTable)
API
Table Attributes
属性 | 说明 | 类型 | 参数 | 默认值 |
---|---|---|---|---|
data | 表格各行的数据 | Array | - | [] |
empty-text | 表格数据为空时显示的文字 | String | - | '暂无数据' |
columns | 表格各列的配置(具体见下文:Columns Configs) | Array | - | [] |
show-header | 是否显示表头 | Boolean | - | true |
show-index | 是否显示数据索引 | Boolean | - | false |
index-text | 数据索引名称 | String | - | '序号' |
show-summary | 是否显示表尾合计行 | Boolean | - | false |
sum-text | 表尾合计行首列名称 | String | - | '合计' |
summary-method | 表尾合计行计算方法 | Function | data, column, columnIndex | - |
max-height | 最大高度 | [String, Number] | - | 'auto' |
stripe | 是否显示间隔斑马纹 | Boolean | - | false |
border | 是否显示纵向边框 | Boolean | - | false |
show-row-hover | 鼠标悬停时,是否高亮当前行 | Boolean | - | true |
tree-type | 是否为树形表格 | Boolean | - | false |
children-prop | 树形表格中遍历的属性名称 | String | - | 'children' |
is-fold | 树形表格中父级是否默认折叠 | Boolean | - | true |
expand-type | 是否为展开行类型表格(为 True 时,需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex) | Boolean | - | false |
selection-type | 是否为多选类型表格 | Boolean | - | false |
row-key | 行数据的 Key,用来优化 Table 的渲染 | Function | row, rowIndex | rowIndex |
row-class-name | 额外的表格行的类名 | String, Function | row, rowIndex | - |
cell-class-name | 额外的表格行的类名 | String, Function | row, rowIndex, column, columnIndex | - |
row-style | 额外的表格行的样式 | Object, Function | row, rowIndex | - |
cell-style | 额外的表格单元格的样式 | Object, Function | row, rowIndex, column, columnIndex | - |
Columns Configs
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 列标题名称 | String | '' |
prop | 对应列内容的属性名 | String | '' |
align | 对应列内容的对齐方式,可选值有 'center', 'right' | String | 'left' |
headerAlign | 对应列标题的对齐方式,可选值有 'center', 'right' | String | 'left' |
width | 列宽度 | [String, Number] | 'auto' |
minWidth | 列最小宽度 | [String, Number] | '80px' |
type | 列类型,可选值有 'template'(自定义列模板) | String | '' |
template | 列类型为 'template'(自定义列模板) 时,对应的作用域插槽(它可以获取到 row, rowIndex, column, columnIndex)名称 | String | '' |
Table Events
事件名 | 说明 | 参数 |
---|---|---|
cell-click | 单击某一单元格 | row, rowIndex, column, columnIndex, $event |
cell-dblclick | 双击某一单元格 | row, rowIndex, column, columnIndex, $event |
cell-contextmenu | 在某一单元格上点击鼠标右键 | row, rowIndex, column, columnIndex, $event |
cell-mouseenter | 鼠标滑入某一单元格 | row, rowIndex, column, columnIndex, $event |
cell-mouseleave | 鼠标滑出某一单元格 | row, rowIndex, column, columnIndex, $event |
row-click | 单击某一行 | row, rowIndex, $event |
row-dblclick | 双击某一行 | row, rowIndex, $event |
row-contextmenu | 在某一行上点击鼠标右键 | row, rowIndex, $event |
row-mouseenter | 鼠标滑入某一行 | row, rowIndex, $event |
row-mouseleave | 鼠标滑出某一行 | row, rowIndex, $event |
checkbox-click | 鼠标单击checkbox | row, rowIndex, $event |
tree-icon-click | 鼠标单击树形icon | row, rowIndex, $event |
expand-cell-click | 鼠标单击展开单元格 | row, rowIndex, $event |
Table Methods
方法名 | 说明 |
---|---|
getCheckedProp | 当表格为多选类型表格时,用于获取当前所选项,返回一个数组; |
setChecked | 当表格为多选类型表格时,用于设置勾选参数(key val),分别为数据要勾选的key以及对应的val |
Dependencies
Dependencies
autoprefixer: ^7.1.2babel-core: ^6.22.1babel-eslint: ^7.1.1babel-helper-vue-jsx-merge-props: ^2.0.2babel-loader: ^7.1.1babel-plugin-istanbul: ^4.1.1babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-runtime: ^6.22.0babel-plugin-transform-vue-jsx: ^3.5.0babel-preset-env: ^1.3.2babel-preset-stage-0: ^6.24.1babel-register: ^6.22.0connect-history-api-fallback: ^1.3.0css-loader: ^0.28.0cssnano: ^3.10.0eslint: ^3.19.0eslint-config-airbnb-base: ^11.1.3eslint-friendly-formatter: ^3.0.0eslint-import-resolver-webpack: ^0.8.1eslint-loader: ^1.7.1eslint-plugin-html: ^3.0.0eslint-plugin-import: ^2.2.0eventsource-polyfill: ^0.9.6friendly-errors-webpack-plugin: ^1.1.3html-webpack-plugin: ^2.30.1less: ^2.7.2less-loader: ^4.0.5opn: ^5.1.0ora: ^1.3.0url-loader: ^0.5.9vue-loader: ^12.1.0vue-style-loader: ^3.0.1vue-template-compiler: ^2.3.3webpack: ^2.6.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.18.0webpack-merge: ^4.1.0