tree-table-vue-exend

A table (with tree-grid) component which based on tree-table-vue v1.1.0 for Vue.js 2.0 and add some features based on team's own need. @MisterTaki) and @lison16

当前版本v1.1.18

其他特性

添加排序，在需要排序的列column对象中添加sortable: true属性，同时使用@on-sort-change绑定排序变更事件

提供表头单元格合并功能，详细用法请参考example/Example.vue

数据更新后已展开节点不会收折(可以通过keep-tree-expand关闭)，可以通过idProp属性指定数据中唯一key(如默认的id字段: idProp="id")

快速添加子项，自定义template，用法如下（按钮及表单为iView组件）

getCheckedProp为getCheckedProps方法，入参为行数据的属性key的数组，如['id', 'name']就可以获取id和name的值

优化tree-icon-click时间回调参数isExpanded，用于异步拉去数据，如果为true说明是展开事件

通过this.$refs.table.treeLoadingTrigger(row[$idProp], true)将唯一标志指定行的展开图标变换为loading图标，其中$idProp需要替换为id-prop属性值

使用方式

<!-- 调用tree-table，并指定属性create-data-obj -->
<tree-table :create-data-obj="createDataObj">
  <template slot="$createdata" slot-scope="createdata">
    <!-- 自定义部分开始 -->
    <!-- 创建父级数据按钮 -->
    <div style="margin-left: 50px;padding: 5px;" v-show="!createdata.tmpData.status && createdata.rowIndex == -1">
      <Button type="info" style="margin-left: 10px" @click="showCreateDataForm(createdata)">Add</Button>
    </div>
    <!-- 创建数据表单 -->
    <div style="margin-left: 50px;padding: 5px;" v-show="createdata.tmpData.status">
      <Form :model="createdata.tmpData.data" inline>
        <FormItem prop="name">
            <Input type="text" v-model="createdata.tmpData.data.name" placeholder="name">
            </Input>
        </FormItem>
        <FormItem prop="sex">
            <Input type="text" v-model="createdata.tmpData.data.sex" placeholder="sex">
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="addDataAndHideForm(createdata)">Add</Button>
        </FormItem>
      </Form>
    </div>
    <!-- 自定义部分结束 -->
  </template>
</tree-table>

其中scope对象createdata包含三个对象row-当前操作列，rowIndex-当前操作列索引号(从-1开始)，tmpData-当前操作列状态信息(包含表单对象属性data和表单显示状态属性status)，同时需要通过props指定表单对象模板属性create-data-obj，该属性为需要新增的表单对像;

Example

Installation

Use npm:

npm i tree-table-vue-extend -S

Or use yarn:

yarn add tree-table-vue-extend

Usage

import Vue from 'vue'
import TreeTable from 'tree-table-vue-extend'

Vue.use(TreeTable)

Or

import Vue from 'vue'
import TreeTable from 'tree-table-vue-extend'

Vue.component(TreeTable.name, TreeTable)

more information please see example..., or git clone this repository and open dev mode (I will give it a homepage later...).

API

Table Attributes

属性	说明	类型	参数	默认值
data	表格各行的数据	Array	-	[]
empty-text	表格数据为空时显示的文字	String	-	'暂无数据'
columns	表格各列的配置（具体见下文：Columns Configs）	Array	-	[]
expand-key	需要显示展开按钮的列的key（columns列对象里的prop）	String	-	默认是第一列的prop
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'
expand-type	是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)	Boolean	-	false
selectable	是否为多选类型表格	Boolean	-	false
select-type	选择列渲染的形式, radio或checkbox	String	-	checkbox
loading	是否显示载入中状态(可通过slot方式自定义载入样式`<tree-table><div slot="loading">数据载入中...</div></tree-table>`)	Boolean	-	false
id-prop	指定行数据唯一标识的列key	String	-	'id'
keep-tree-expand	保持已展开列的展开状态	Boolean	-	false
force-expand-icon-prop	用于通过该属性指定的列key来判断该行数据是否有子集（用于异步操作)	String	-	'isBase'
checkedRows	初始化已选行，数组的值需要为`id-prop`指定列的值	Array	-	[]
disabledRows	初始化禁选行，数组的值需要为`id-prop`指定列的值	Array	-	[]
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

属性	说明	类型	默认值
title	列标题名称	String	''
key	对应列内容的属性名	String	''
align	对应列内容的对齐方式，可选值有 'center', 'right'	String	'left'
headerAlign	对应列标题的对齐方式，可选值有 'center', 'right'	String	'left'
width	列宽度	[String, Number]	'auto'
minWidth	列最小宽度	[String, Number]	'80px'
type	列类型，可选值有 'template'(自定义列模板)	String	''
sortable	列类型，是否启用排序，默认false	Boolean	false
className	列类型，自定义inner样式，e.g. ['my-class-1','my-class-2']	Array	[]
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, column, columnIndex, $event, isExpanded(表示当前是展开(true)还是收则(false))
expand-cell-click	鼠标单击展开单元格	row, rowIndex, $event
on-sort-change	排序变更事件	column, orderType(`desc`，`asc`，`normal`)

Table Methods

方法名	说明	参数
getCheckedProp	当表格为多选类型表格时，用于获取当前所选项的属性，返回一个数组；属性默认为['index']。	array
getExpandedRows	获取当前展开的列	无
foldAll	全部展开/收折	boolean
setDefaultExpandItems	唯一标识的行展开，需要更新`data`	array

xwxsee / tree-table-vue-extend

tree-table-vue-exend

其他特性

使用方式

Example

Installation

Usage

API

Table Attributes

Columns Configs

Table Events

Table Methods

简介

发行版

贡献者

近期动态

xwxsee / tree-table-vue-extend .gitee-modal { width: 500px !important; }

tree-table-vue-exend

其他特性

使用方式

Example

Installation

Usage

API

Table Attributes

Columns Configs

Table Events

Table Methods

简介

发行版

贡献者

近期动态

搜索帮助

xwxsee / tree-table-vue-extend