vxe-table 实现折叠表格

一、界面效果

说明： 一个班级占一个折叠面板，只有学生行有勾选。

二、数据结构

export const students ={
    
    
  school:'xxx小学',
  list:{
    
    
    "classOne":[
      {
    
    
        name:'小白',
        age:'12',
        sex:'男',
        id:1
      },
      {
    
    
        name:'小红',
        age:'11',
        sex:'女',
        id:2
      },
      {
    
    
        name:'小粉',
        age:'13',
        sex:'女',
        id:3
      },
      {
    
    
        name:'小黑',
        age:'12',
        sex:'男',
        id:4
      }
    ],
    "classTwo":[
      {
    
    
        name:'小紫',
        age:'13',
        sex:'女',
        id:5
      },
      {
    
    
        name:'小蓝',
        age:'12',
        sex:'男',
        id:6
      },
      {
    
    
        name:'小灰',
        age:'12',
        sex:'男',
        id:7
      },
      {
    
    
        name:'小绿',
        age:'11',
        sex:'女',
        id:8
      }
    ],
  }
}

三、代码实现

<template>
  <div>
    <vxe-table
      ref="xTable"
      resizable
      :data="tableData"
      :tree-config="{children: 'children',expandAll: true}"
      :checkbox-config="{labelField: 'name', highlight: true, visibleMethod: showCheckboxkMethod}"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-column type="checkbox" title="姓名" field="name" tree-node>
      </vxe-column>
      <vxe-column field="age" title="年龄"></vxe-column>
      <vxe-column field="sex" title="性别"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import {
    
     students } from './colConfig'
export default {
    
    
  data() {
    
    
    return {
    
    
      tableData: [],
      checkData: []
    }
  },
  created() {
    
    
    this.getTableData()
  },
  methods: {
    
    
  // 功能：重组表格数据
    getTableData() {
    
    
      this.tableData = [
        {
    
    
          name: "一班",
          children: students.list.classOne
        },
        {
    
    
          name: "二班",
          children: students.list.classTwo
        }
      ]
      console.log(this.tableData);
    },
    // 功能：复选框改变事件
    selectChangeEvent({
     
      $table }) {
    
    
      const records = $table.getCheckboxRecords()
      console.log(records);
      console.info(`勾选${
      
       records.length }个树形节点`, records)
    },
    // 功能：控制复选框是否显示
    showCheckboxkMethod({
     
      row }) {
    
    
      return row.children ? false : true
    },
  }
}
</script>