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

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

1、效果图

2、代码

html 复制代码
<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>
相关推荐
楚轩努力变强26 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗2 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
云边散步3 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥3 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
星眠3 小时前
学习低代码编辑器第四天
javascript·面试
Hilaku3 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing4 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源