最简单 实现 Element-ui el-table的懒加载表格数据 el-table懒加载请求数据 element-ui 懒加载_element ui 树形表格懒加载

1、效果图

2、代码

<template>
<el-table :data="tableData" style="width: 100%"  @expand-change="expandChange">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.lazy.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.lazy.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.lazy.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.lazy.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.lazy.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.lazy.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.lazy.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
	    </el-table-column>
	    <el-table-column
	      label="商品 ID"
	      prop="id">
	    </el-table-column>
	    <el-table-column
	      label="商品名称"
	      prop="name">
	    </el-table-column>
	    <el-table-column
	      label="描述"
	      prop="desc">
	    </el-table-column>
	  </el-table>

</template>

<script>
  export default {
    data() {
      return {
      	lazy:{
      	  id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
      	},
        tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      },
      methods: {
	    /**
	     * 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）
	     * @param {*} row
	     */
	    expandChange(row, expandedRows) {
	      // 判断当前行 属性 'lazy' 是否 等于 undefined, 等于 undefined 就请求后端加载数据  才加载日志数据
	      if (row.lazy=== undefined) {
		      
		      	// 这里就可以请求后端数据了，我这边直接用固定数据赋值
		      	row. Lazy = this.lazy
		      	
	            // 改变数据，并不会立马刷新，需要 手动改变一下 页面事件，随便一个事件都可以，这边使用的是 高亮当前行
	            this.$refs.table.setCurrentRow(row)
	      }
	    }
	  }
    }
  }
</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