tree-table-vue-extend v1.1.18

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

Columns Configs

Table Events

Table Methods