最简单 实现 Element-ui el-table的懒加载表格数据 el-table懒加载请求数据 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>