vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
类别:编程学习 浏览量:1453
时间:2022-01-18 01:30:19 vue element 表格上拉加载数据
Vue组件库ElementUI实现表格加载树形数据教程ElementUI实现表格树形列表加载教程,供大家参考,具体内容如下
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型
关键代码,在el-table添加属性, :tree-props="{children: 'children'}" ,注意row必须命名为children,官网也进行了说明:
支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
<el-table ref="Table" :data="apprItemData" :header-cell-style="headClass" @select="handleSelection" row-key="approveItem" height="420" border default-expand-all :tree-props="{children: 'children'}"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="itemCode" label="事项编码"> </el-table-column> <el-table-column prop="approveName" label="事项名称"> </el-table-column> <el-table-column prop="apprStatusStr" label="配置的环节" color="blue"> </el-table-column> </el-table>
后台json数据:
{ "id":3, "itemCode":"123", "approveName":"测试事项", "apprStatusStr":"环节名称", "children":[ { "id":31, "itemCode":"111", "approveName":"测试事项", "apprStatusStr":"环节名称" } ] }
<script type="text/babel"> var vm = new Vue({ el: '#app', data:{ apprItemData : [], currentPage: 1, //当前页 totalRow: 0, //总页数 pageSize: 10 //当前显示条数 }, computed: {}, watch: {}, created() {}, mounted() { this.loadItemData(); }, methods: { // 加载事项信息 loadItemData () { var pageSize = this.pageSize; var currentPage = this.currentPage; console.log("pageSize:"+pageSize+",currentPage:"+currentPage); //debugger; var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage; $.ajax({ type: 'get', url:geturl, contentType: "application/json; charset=utf-8", success: function(data) { //debugger; console.log("totalRow:"+data.total); vm.apprItemData = data.rows; }, error: function(e) { console.log("更新数据出现错误:",e); } }) } } }); </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- elementui多个组件怎么使用(ElementUI在实际项目使用步骤详解)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
热门推荐
- 宝塔linux面板开哪些端口(Linux宝塔面板如何实现服务器开启关闭禁止ping?)
- sqlserver分表后如何查询(SQL Server中row_number分页查询的用法详解)
- serv-u设置文件夹权限(serv_U 域离线 解决方法)
- dede搜索模板代码(DEDE调用指定文章ID来调用特定文档)
- 管理公有云方案(ZKEYS公有云管理系统一键部署操作流程)
- python html文字分段(Python对HTML转义字符进行反转义的实现方法)
- python写的工具(python调用虹软2.0第三版的具体使用)
- 谷歌浏览器调试模式下搜索小技巧
- sql中row的用法(sql server数据库中raiserror函数用法的详细介绍)
- C#中Dictionary的用法
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9