vxe-table：一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等）

本是古典何须时尚 2023-03-13 11:50 7阅读 0赞

### 开门见山看效果图，看是不是你想要的 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]

### vxe-table（先来看看这个强大组件是什么样子） ###

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等…

**git地址**：[vxe-table][].

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 1]  
**vxe-table组件地址**：[点击查看发现新大陆，建议收藏，留着备用][Link 1].

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 2]  
组件中有详细的开发指南，其实不用做我过多的介绍，根据你的需求可以进行安装和使用！  
但是呢，既然分享这个组件啦，那就顺便给大家展示一下在vue项目中使用的具体步骤吧，也算自己再学习学习！

### vxe-table组件在vue中实现步骤 ###

#### 第一步：还是先安装 ####

依赖库：vue 2.6+, xe-utils 2.4+

// npm安装 xe-utils 和 vxe-table 
     npm install xe-utils vxe-table

#### 第二步：在main.js中引入 ####

import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    
    Vue.use(VXETable)
    
    // 给 vue 实例挂载全局窗口对象
    //如果用不到这个组件的弹窗可以不写，根据个人使用情况而定
    Vue.prototype.$XModal = VXETable.modal

#### 第三步：在需要的组件中使用 ####

<template>
      <div >
        <vxe-toolbar>
              <template v-slot:buttons>
                <vxe-button @click="$refs.xTree.toggleTreeExpansion(tableData[0], true)">切换第一个</vxe-button>
                <vxe-button @click="$refs.xTree.setTreeExpansion(tableData[2], true)">展开第三个</vxe-button>
                <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
                <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
              </template>
            </vxe-toolbar>
    
            <vxe-table
              resizable
              border
              ref="xTree"
              :tree-config="{children: 'children'}"
              :edit-config="{trigger: 'click', mode: 'row'}"
              :checkbox-config="{labelField: 'id'}"
              :data="tableData">
              <vxe-table-column type="checkbox" title="ID" tree-node></vxe-table-column>
              <vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
              <vxe-table-column field="size" title="Size" :edit-render="{name: 'input'}"></vxe-table-column>
              <vxe-table-column field="type" title="Type" :edit-render="{name: 'input'}"></vxe-table-column>
              <vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
            </vxe-table>
      </div>
    </template>
    
    <script>
        export default { 
              data () { 
                return { 
                  tableData: []
                }
              },
              created () { 
                this.tableData = window.MOCK_TREE_DATA_LIST
              }
         }
                  
    </script>

好了，这样你想要的树形可编辑表格就展示啦，如果你的项目有这中需求，可以试试！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/11215114dd564d3287ba364368960f2f.png
[vxe-table]: https://github.com/xuliangzhan/vxe-table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/2d6659c4f6194b39a8b44a8400aa874f.png
[Link 1]: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/tree/basic
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230312/27e60a1d9fb14c478a37b4512405732d.png