北京网站设计服务,电商软件什么品牌好,网上商城平台开发,企业网站个人可以备案吗效果图 在做后台时#xff0c;使用的iview组件库中的树形表格#xff0c;但数据量过大时会导致页面卡死#xff0c;借助umy-ui的虚拟表格完美解决了数据量大卡顿的问题。
先放文档#xff1a;http://www.umyui.com/umycomponent/u-table-column-api
安装
npm install u…效果图 在做后台时使用的iview组件库中的树形表格但数据量过大时会导致页面卡死借助umy-ui的虚拟表格完美解决了数据量大卡顿的问题。
先放文档http://www.umyui.com/umycomponent/u-table-column-api
安装
npm install umy-ui引入
全局引入在main.js中放入以下代码 import Vue from vue;import UmyUi from umy-uiimport umy-ui/lib/theme-chalk/index.css;// 引入样式import App from ./App.vue;Vue.use(UmyUi);new Vue({el: #app,render: h h(App)});按需引入
先安装 babel-plugin-component
npm install babel-plugin-component -D在 .babelrc 中plugins添加
{plugins: [[component,{libraryName: umy-ui,styleLibraryName: theme-chalk}]]
}在main.js中按需引入这里我只需要用到表格所以只引入了表格完整组件列表和引入方式可以查看官网
import UTable from umy-ui
Vue.use(UTable)使用
u-tablestylemargin-top: 10px;refplTreeTablefixed-columns-rollbeautify-tableheader-drag-style:heighttableHeight:treeConfig{children: children,expandAll: false,lazy: true,load: load,hasChildren: hasChildren}toggle-tree-expandtoggleTreeExpanduse-virtualrow-ididrow-keyidborder!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性--u-table-column:tree-nodetruepropnamelabel名称:width200/!-- 表头其中prop是需要显示的字段 --u-table-columnv-foritem in columns16:keyitem.key:propitem.key:labelitem.title:widthitem.widthaligncenter/!--这里是自己添加的右侧操作按钮根据需求而定--u-table-column :resizablefalse:width120aligncenterlabel操作template slot-scopescopeButton sizesmall title下级 iconmd-add-circle clickshowModal(null, 4, 下级, scope.row.id)/ButtonButton sizesmall title修改 iconmd-create clickshowModal(scope.row.id, 2, 修改)/ButtonButton sizesmall title删除 iconmd-trash clickremoveTableHandle(scope.row)/Button/template/u-table-column/u-tablescriptexport default {data () {return {columns: [ // 表头数据{title: 编号,key: id,width: 140,},{title: 关联科目,key: glkmmc,align: center,},{title: 车型,key: jzlx,align: center,},{title: 大类名称,key: ctype,align: center,},{title: 描述,key: des,align: center,},{title: 题目数量,key: questcount,align: center,},],data5: [], // 完整表格数据data13: [], // }},mounted() {},methods:{async getTreeData(){ // 请求数据let paramData {type: list,service: xxx,src: xxx,};const res await this.$http(paramData);if (res.code 200 res.success) {this.data5 JSON.parse(JSON.stringify(res.data)); // 存储完整数据用作展开子集懒加载时使用this.data13 res.data; // 这个是实际渲染出来的数据先将子集置空保证页面运行速度this.data13.map(v{if(v.children.length0){v.children [];v.hasChildren true; // 在children 为空的情况下添加 hasChildren 为true才会显示展开按钮}})// 设置表格数据this.$refs.plTreeTable.reloadData([ ...this.data13])}},// 子集收起展开时触发toggleTreeExpand (row, treeExpanded, event) {// console.log(row, treeExpanded, event,toggleTreeExpand)},load (row, resolve) { // row是当前点击的内容,拿到id再去找完整数据中对应的子集var res this.data5.filter(v{return v.id row.id;})[0];setTimeout(() {if ( row.id ) {resolve(res .children)} }, 1000)},}}/script可选择的树形表格 使用 u-tablestylemargin-top: 10px;refplTreeTablefixed-columns-rollbeautify-table:heighttableHeightheader-drag-style:treeConfig{children: children,expandAll: false,lazy: true,load: load,hasChildren: hasChildren}selection-changehandleSelectionChangeuse-virtualrow-ididrow-keyidborderu-table-column border-line typeselection width55 :selectableselectable/!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性--u-table-column:tree-nodetruepropnamelabel名称:width200/u-table-columnv-foritem in columns:keyitem.key:propitem.key:labelitem.title:widthitem.widthaligncenter//u-tablescriptexport default {data () {return {columns: [ // 表头数据{title: 编号,key: id,width: 140,},{title: 关联科目,key: glkmmc,align: center,},{title: 车型,key: jzlx,align: center,},{title: 大类名称,key: ctype,align: center,},{title: 描述,key: des,align: center,},{title: 题目数量,key: questcount,align: center,},],data5: [], // 完整表格数据data13: [], // }},mounted() {},methods:{async getTreeData(){ // 请求数据let paramData {type: list,service: xxx,src: xxx,};const res await this.$http(paramData);if (res.code 200 res.success) {this.data5 JSON.parse(JSON.stringify(res.data)); // 存储完整数据用作展开子集懒加载时使用this.data13 res.data; // 这个是实际渲染出来的数据先将子集置空保证页面运行速度this.data13.map(v{if(v.children.length0){v.children [];v.hasChildren true; // 在children 为空的情况下添加 hasChildren 为true才会显示展开按钮}})// 设置表格数据this.$refs.plTreeTable.reloadData([ ...this.data13])}},load (row, resolve) { // row是当前点击的内容,拿到id再去找完整数据中对应的子集var res this.data5.filter(v{return v.id row.id;})[0];setTimeout(() {if ( row.id ) {resolve(res .children)} }, 1000)},// index对应的行是否可选selectable (row, index) {// if (index1) {return true// }},// 点击复选框按钮handleSelectionChange(val){this.chooseList val; // 获取到点击的值}}}/script
