当前位置:   article > 正文

umy-ui树形结构表格懒加载用法详解_树形数据与懒加载

树形数据与懒加载

效果图
在这里插入图片描述
在做后台时,使用的iview组件库中的树形表格,但数据量过大时会导致页面卡死,借助umy-ui的虚拟表格完美解决了数据量大卡顿的问题。

先放文档:http://www.umyui.com/umycomponent/u-table-column-api

安装

npm install umy-ui
  • 1

引入

全局引入:在main.js中放入以下代码

  import Vue from 'vue';
  import UmyUi from 'umy-ui'
  import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
  import App from './App.vue';

  Vue.use(UmyUi);

  new Vue({
    el: '#app',
    render: h => h(App)
  });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

按需引入:

先安装 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)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

使用

<u-table
        style="margin-top: 10px;"
        ref="plTreeTable"
        fixed-columns-roll
        beautify-table
        header-drag-style
        :height="tableHeight"
        :treeConfig="{
          children: 'children',
          expandAll: false,
          lazy: true,
          load: load,
          hasChildren: 'hasChildren'}"
        @toggle-tree-expand="toggleTreeExpand"
        use-virtual
        row-id="id"
        row-key="id"
        border>
        <!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
        <u-table-column
          :tree-node="true"
          prop="name"
          label="名称"
          :width="200"/>
          <!-- 表头,其中prop是需要显示的字段 -->
        <u-table-column
          v-for="item in columns16"
          :key="item.key"
          :prop="item.key"
          :label="item.title"
          :width="item.width"
          align="center"/>
          <!--这里是自己添加的右侧操作按钮,根据需求而定-->
        <u-table-column 
          :resizable="false"
          :width="120"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <Button size="small" title="下级" icon="md-add-circle" @click="showModal(null, 4, '下级', scope.row.id)"></Button>
            <Button size="small" title="修改" icon="md-create" @click="showModal(scope.row.id, 2, '修改')"></Button>
            <Button size="small" title="删除" icon="md-trash" @click="removeTableHandle(scope.row)"></Button>
        </template>
        </u-table-column>
    </u-table>

	<script>
	export 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.length>0){
		            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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128

可选择的树形表格

在这里插入图片描述

使用

    <u-table
      style="margin-top: 10px;"
      ref="plTreeTable"
      fixed-columns-roll
      beautify-table
      :height="tableHeight"
      header-drag-style
      :treeConfig="{
        children: 'children',
        expandAll: false,
        lazy: true,
        load: load,
        hasChildren: 'hasChildren'}"
      @selection-change="handleSelectionChange"
      use-virtual
      row-id="id"
      row-key="id"
      border>
      <u-table-column border-line type="selection" width="55" :selectable="selectable"/>
      <!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
      <u-table-column
        :tree-node="true"
        prop="name"
        label="名称"
        :width="200"/>
      <u-table-column
        v-for="item in columns"
        :key="item.key"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        align="center"/>
    </u-table>

	<script>
	export 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.length>0){
		            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 (index==1) {
		      return true
		        // }
		    },
		    // 点击复选框按钮
		    handleSelectionChange(val){
		      this.chooseList = val; // 获取到点击的值
		    }
		 }
	}
	
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/115410
推荐阅读
相关标签
  

闽ICP备14008679号