vxe-table 实现折叠表格

最新推荐文章于 2025-10-23 16:53:52 发布

原创最新推荐文章于 2025-10-23 16:53:52 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

vxe-table 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用VxeTable组件展示班级信息，包括折叠面板的界面效果，数据结构中组织的学生列表，以及使用Vue.js实现的代码片段，展示了如何通过checkbox配置和事件监听来操作选中学生。

一、界面效果

在这里插入图片描述

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

二、数据结构

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>