SuitTreeTable树表格

说明

树表格基于 第三方表格组件库 vxe-table (opens new window) 进行的二次封装

使用

<template>
  <div class="app-container userDiv">
    <suit-tree-table
      class="myTreeTable"
      ref="myTreeTable"
      :data="data"
      :columns="columns"
      :list-loading="listLoading"
      @loadMoreData="loadMoreData"
      border
    ></suit-tree-table>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
	  listLoading: false,
      data: [],
	  columns: [
        {
          text: '字典名称',
          value: 'name'
        },
        {
          text: '字典编码',
          value: 'code',
        },
        {
          text: '操作',
          type: 'iconButton',
          list: this.operButton
        }
      ],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取所有子项目
    getList() {
      this.data =  [{
          name:'根字典',
          code:'root',
          leaf:false,
          id:1,
          treeId: "00001",
          treeLevel:1
        },
        {
          name:'节点1-2',
          code:'level1-2',
          id:2,
          parentId:1,
          leaf:true,
          treeId: "00001.00001",
          treeLevel: 2,
        },{
          id:3,
          name:'节点1-3',
          code:'level1-3',
          leaf:true,
          parentId:1,
          treeId: "00001.00002",
          treeLevel: 2,
        },{
          id:4,
          name:'节点1-4',
          code:'level1-4',
          leaf:true,
          parentId:1,
          treeId: "00001.00003",
          treeLevel: 2,
        },
        {
          name:'根字典1',
          code:'root',
          leaf:false,
          id:2,
          treeId: "00002",
          treeLevel:1
        },
        {
          name:'节点1-2',
          code:'level1-2',
          id:5,
          parentId:2,
          leaf:false,
          treeId: "00002.00001",
          treeLevel: 2,
        },
        {
          name:'节点1-2-1',
          code:'level1-2-1',
          id:8,
          parentId:5,
          leaf:true,
          treeId: "00002.00001.00001",
          treeLevel: 3,
        },{
          id:6,
          name:'节点1-3',
          code:'level1-3',
          leaf:true,
          parentId:2,
          treeId: "00002.00002",
          treeLevel: 2,
        },{
          id:7,
          name:'节点1-4',
          code:'level1-4',
          leaf:true,
          parentId:2,
          treeId: "00002.00003",
          treeLevel: 2,
        }
      ]
    },
	// 表格操作按鈕
    operButton(val) {
      const buttonList = [
        {
          id: 'PZGJ',
          class: 'iconmokuai',
          value: '配置构件',
          click: this.setModel,
        },
        {
          id: 'SC',
          class: 'iconshanchu1',
          value: '删除',
          click: this.deleteMBS,
        }
      ]
      return buttonList
    },
    setModel(){},
    deleteMBS(){},
    loadMoreData(){},
	}
}
</script>

Expand Copy Copy

参数说明

属性

属性	描述	类型	可选值	默认值
data	树表格显示的数据	Array[],Object{}	—	—
columns	树表格列的数据	Array[]	—	[]
evalArgs		Array[]	—	[]
maxHeight	树表格显示的最大高度	string	—	—
isTreeData	传入的数据是否为树形结构	boolean	—	false
level	级别	number	—	—
tableRowClassFun	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function(row)	—	—
cellStyle	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})	—	—
listLoading	是否显示加载样式	boolean	—	false
showCheckBox	是否显示复选框	boolean	—	false
expandAll	是否展开所有节点	boolean	—	false
defaultExpandedKeys	默认展开节点数据（需要传入节点唯一值）	Array[]	—	—

事件

事件名称	说明	回调参数
loadMoreData	点击展开图标时触发	点击展开项

columns 属性

属性	描述	类型	可选值	默认值
type	列的类型，button(渲染成按钮)，iconButton(渲染成图标按钮)	string	—	—
text	列标题	string	—	—
value	树表格的key	string	—	—
width	列宽度（如果为空则均匀分配剩余宽度，如果全部列固定了，可能会存在宽屏下不会铺满，可以配合 "%" 或者 "min-width" 布局）	number, string	px, %	继承 table.column-config.width
fixed	将列固定在左侧或者右侧（注意：固定列应该放在左右两侧的位置）	string	left（固定左侧）, right（固定右侧）	—
formatter	自定义格式化表格内容	Function()	—	—
filter	过滤方法	Function()	filterParams	当前列的属性
filterParams	过滤参数	Array[]	—	—
list	按钮列表 类型为button，iconButton独有,需要返回Array[]数组	Function()	—	—

columns.list 属性

属性	描述	类型	可选值	默认值
value	按钮名称	string	—	—
type	类型，columns.type为button独有	string	primary / success / warning / danger / info / text	—
class	样式类名，columns.type为iconButton独有	string	—	—
click	按钮点击事件	Function()	—	返回当前scope,$event
privilege	权限编码（组件内部会根据权限编码进行处理是否有权限显示）	string	—	—

组件源码及综合示例参考

组件源码 (opens new window)综合示例 (opens new window)