iview-table-tree

概述

iview-table-tree是基于iview组件库开发的树形表格。需要注意的是，iview-table-tree必须在安装了iview的基础上再安装使用。

安装

npm install iview-table-tree --save

使用

<template>
  <div id="app">
    <tree-table :columns="columns" :data="data" />
  </div>
</template>

<script>
import TreeTable from 'iview-table-tree'

export default {
  name: 'app',
  components: { TreeTable },
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '性别',
          key: 'gender',
          align: 'center'
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center'
        }
      ],
      data: [
        {
          name: '老王1',
          gender: '男',
          age: '50',
          children: [
            {
              name: '老王1-1',
              gender: '男',
              age: 46
            },
            {
              name: '老王1-2',
              gender: '男',
              age: 53,
              children: [
                {
                  name: '老王1-2-1',
                  gender: '男',
                  age: 51
                }
              ]
            }
          ]
        },
        {
          name: '小明1',
          gender: '男',
          age: 24
        },
        {
          name: '小红1',
          gender: '女',
          age: 22
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style scoped>
#app {
  padding: 12px;
}
</style>

API

props

属性|说明|类型|默认值 -|-|-|- columns|树形表格列的配置描述，具体项见后文|Array|[] data|显示的结构化数据|Array|[] show-checkbox|是否显示多选框|Boolean|false children-key|子节点字段名|String|children expand-key|节点是否展开字段名|String|expand disable-checkbox-key|是否禁掉checkbox字段名|String|disableCheckbox disabled-key|是否禁掉响应字段名|String|disabled title-background-color|表头标题背景色|String|#E8E8E8

events

事件名|说明|返回值 -|-|- on-check-change|点击复选框时触发时触发|当前已勾选节点的数组 on-toggle-expand|展开和收起子列表时触发|当前节点的数据

column

属性|说明|类型|默认值 -|-|-|- title|列头显示文字|String|- key|对应列内容的字段名|String|- width|列宽|Number|- align|对齐方式，可选值为left左对齐、right右对齐、center居中对齐|String|left

data

属性|说明|类型|默认值 -|-|-|- columns定义的每一个key|显示的数据|[String, Number]|- expand|是否展开子节点|Boolean|false disabled|禁掉响应|Boolean|false disableCheckbox|禁掉checkbox|Boolean|false checked|是否勾选（如果勾选，子节点也会全部勾选）|Boolean|false children|子节点属性数组|Array|-

注意：

data里的字段名，除了columns定义的key外，其它字段名根据props定义的字段名而定，以上只是默认值

联系

如有疑问，请联系邮件：[email protected]