效果图【树形结构的表格页面】

devexpress 树形表格_Boo

1.安装

npm i vue-table-with-tree-grid -S
or
yarn add vue-table-with-tree-grid

2.引用

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.component('treeTable', ZkTable)

3.组件属性说明

<treeTable
      ref="table"
      :data="dataList"  // 数据源
      :columns="columns"  // 设置表格中列配置信息 【在data中设置】
      :selection-type="false" // 是否有复选框【默认为true】
      :expand-type="false" // 是否展开数据【默认为true】
      show-index  // 是否设置索引列【默认为false】
      index-text="#"  // 设置索引列头【默认为序号】
      border // 是否显示纵向边框【默认为false】
      :show-row-hover="false" // 是否鼠标悬停高亮【默认为true】                               
      >
      <template slot="slotName" scope="scope">
        {{ scope.row }}
      </template>
 </treeTable>

 <script>
	export default {
	  data() {
   		 return {
    	  //表格数据
            dataList: [],
            //columns(设置表格中列配置信息)
            columns: [
                {
                    label: 'xxx',  // 列标题名称
                    prop: 'prop',  // 对应列内容的属性名
                    type: 'template',  // 把列内容自定义列模板列
                    template: 'slotName', // 相对应自定义列模板列的插槽名字【它可以获取到 row, rowIndex, column, columnIndex】
                    align:'',  //  对应列内容的对齐方式,
                    headerAlign:'', //  对应列标题的对齐方式
     	  }]
		 }
 	},
</script>

4.完整API

4.1 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

-

4.2 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

‘’

4.3 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

4.3 Table Methods

方法名

说明

参数

getCheckedProp

当表格为多选类型表格时,用于获取当前所选项的属性,返回一个数组;属性默认为’index’。

prop