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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- elementui多个组件怎么使用(ElementUI在实际项目使用步骤详解)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- elementui下拉框联动(Element树形控件整合带图标的下拉菜单tree+dropdown+input)
- 14岁丧父 20岁丧母,从苦难走向辉煌的银泰创始人沈国军(14岁丧父20岁丧母从苦难走向辉煌的银泰创始人沈国军)
- 银泰集团董事长沈国军获评 北京影响力 十大企业家(银泰集团董事长沈国军获评)
- 15帅气男士发型,清爽时尚很有型,喜欢就试试(清爽时尚很有型)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
热门推荐
- docker搭建方法(超简单实现Docker搭建个人博文系统)
- php使用面向对象如何写好代码(PHP面向对象程序设计模拟一般面向对象语言中的方法重载overload示例)
- RegisterClientScriptBlock与RegisterStartupScript区别
- mysqljson字段查询(Mysql 查询JSON结果的相关函数汇总)
- js数组去重的十种方法(JavaScript常用数组去重实战源码)
- 如何安装phpmysql环境(phpnow重新安装mysql数据库的方法)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- 链式编程jquery(实例详解jQuery的链式编程风格)
- python怎么导入beautifulsoup元素(python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比)
- python 字典按key值排序(Python 按字典dict的键排序,并取出相应的键值放于list中的实例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9