关于vue树形表格的实现-vxe-table

最新推荐文章于 2025-06-26 16:32:05 发布

言只石皮

最新推荐文章于 2025-06-26 16:32:05 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/webtext/article/details/121856503

本文介绍了如何在Vue应用中安装VXE-Table库，包括必要的导入步骤，并详细展示了如何配置和使用VXE-Tableresizable组件，包括列定义和操作列的模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

 npm install xe-utils@3 vxe-table@3

 import 'xe-utils'
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'

 Vue.use(VXETable)

2、使用
html:

<vxe-table resizable
                   border
                   ref="xTable"
                   :tree-config="{transform: true, rowField: 'id', parentField: 'pid'}"
                   :data="tableData"
                   style="margin-top: 0.3rem">
          <vxe-column field="name" title="名称" tree-node>
            <template #default="{ row }">
              <i v-if="row.children.length>0"  class=" el-icon-folder"></i>
              <i v-else  class="el-icon-document"></i>
              <span style="text-align: left">{{row.name}}</span>
            </template>
          </vxe-column>
          <vxe-column field="funCode" title="系统编码"></vxe-column>
          <vxe-column field="url" title="URL"></vxe-column>
          <vxe-column field="funOrder" title="排序"></vxe-column>
          <vxe-column field="address" title="类型"  >
            <template #default="{ row }">
              <div class="userManagement_content_line">
               <span>{{row.funType==0?'系统':row.funType==1?'菜单':row.funType==2?'菜单项':row.funType==3?'功能模块':""}}</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="address" title="操作" width="500">
            <template #default="{ row }">
              <div class="userManagement_content_line2">
                <i class="el-icon-s-tools" v-if="row.funType==2||row.funType==0||row.funType==1||row.funType==3" ">修改</i>
                <i class="el-icon-delete" v-if="row.funType==2||row.funType==0||row.funType==1||row.funType==3" ">删除</i>
                <i class="el-icon-plus" v-if="row.funType==0||row.funType==1" >增加子菜单</i>
                <i class="el-icon-circle-plus-outline" v-if="row.funType==0||row.funType==1" >增加菜单项</i>
                <i class="el-icon-plus" v-if="row.funType==2||row.funType==0||row.funType==1" >增加功能模块</i>
              </div>
            </template>
          </vxe-column>
        </vxe-table>

js:

data() {
      return {
        tableData: [{
		    id: "",
		    name: "",
		    funCode: "",
		    funType: 0,
		    funOrder: 0,
		    url: null,
		    pid: null,
		    sysCode: null,
		    optIds: null,
		    remark: "1234123",
		    openModel: null,
		    funIcon: null
		}],
     }
 }