vue如何实现树形结构表格

这篇文章主要讲解了“Vue如何实现树形结构表格”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue如何实现树形结构表格”吧！

在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。

通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

row-key="id"和:tree-props="{children: 'children', hasChildren: 'hasChildren'}是必须的。

下面是vue的表格树：

 <!--表格-->         <el-row>            <el-table :data="tableData"  row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">                        <el-table-column prop="privilegeName" label="权限名称" >                        </el-table-column>                        <el-table-column prop="privilegeCode" label="权限编码" >                        </el-table-column>                        <el-table-column prop="privilegeType" label="权限类别" :fORMatter="formatPrivilegeType" >                        </el-table-column>                         <el-table-column label="操作">                            <template slot-scope="scope">                                                                <el-button type="primary" size="mini" @click="toAdd(scope)">新增</el-button>                                <el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button>                            </template>                        </el-table-column>                    </el-table>                    <br>                    <el-pagination                        @size-change="handleSizeChange"                        @current-change="handleCurrentChange"                        :current-page="pagination.pageIndex"                        :page-sizes="[5, 10, 20, 30, 40]"                        :page-size=pagination.pageSize                        layout="total, prev, pager, next"                        :total=pagination.total>                    </el-pagination></el-row>

后端代码：SpringBoot+MyPlus+MySQL8 实现数据结构查询

前端全部代码:

<style></style><template>  <div id="privilege-manager">   <!--顶部菜单栏-->    <el-form :inline="true" class="demo-form-inline">          <el-form-item>            <el-button              class="el-icon-refresh"              type="primary"              @click="toAdd()">添加            </el-button>          </el-form-item>      </el-form>      <!--表格-->         <el-row>            <el-table :data="tableData"  row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">                        <el-table-column prop="privilegeName" label="权限名称" >                        </el-table-column>                        <el-table-column prop="privilegeCode" label="权限编码" >                        </el-table-column>                        <el-table-column prop="privilegeType" label="权限类别" :formatter="formatPrivilegeType" >                        </el-table-column>                         <el-table-column label="操作">                            <template slot-scope="scope">                                                                <el-button type="primary" size="mini" @click="toAdd(scope)">新增</el-button>                                <el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button>                            </template>                        </el-table-column>                    </el-table>                    <br>                    <el-pagination                        @size-change="handleSizeChange"                        @current-change="handleCurrentChange"                        :current-page="pagination.pageIndex"                        :page-sizes="[5, 10, 20, 30, 40]"                        :page-size=pagination.pageSize                        layout="total, prev, pager, next"                        :total=pagination.total>                    </el-pagination>        </el-row>    </div></template> <script>export default{    name: 'privilege-manager',    data () {     return {        tableData: [],        dialogFormEdit: false,        dialogFormAdd:false,        privilege: {          id: '',          privilegeName: '',          privilegeCode: '',          privilegeType: '',          pid: '0'        },        pagination: {            pageIndex: 1,            pageSize: 10,            total: 0,        }      }    },    methods:{         init () {        var self = this         this.$axiOS({            method:'post',            url:'/api/baoan/privilege/getPage',            data:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize, "pid": this.privilege.pid},            headers:{                'Content-Type':'application/JSON;charset=utf-8'      //改这里就好了          }        }).then(res => {           console.log(res);           self.pagination.total = res.data.datas.data.total;           self.tableData = res.data.datas.data.records;        })          .catch(function (error) {            console.log(error)          })        },        handleSizeChange(val) {                console.log(`每页 ${val} 条`);                this.pagination.pageSize = val;                this.pagination.pageIndex = 1;                this.init();        },        handleCurrentChange(val) {                 console.log(`当前页: ${val}`);                this.pagination.pageIndex = val;                this.init();        },        // 权限类别转换        formatPrivilegeType: function( row, column) {                 if(row.privilegeType === '1'){                     return '目录'                 } else if(row.privilegeType === '2') {                     return '菜单'                 } else if (row.privilegeType === '3') {                     return '按钮'                 } else {                     return ''                 }        }    },    mounted: function () {      this.init()  }  }</script>

vue是什么

Vue是一套用于构建用户界面的渐进式javascript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

感谢各位的阅读，以上就是“vue如何实现树形结构表格”的内容了，经过本文的学习后，相信大家对vue如何实现树形结构表格这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！