最简单 实现 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 分钟前
js代码09
开发语言·javascript·ecmascript
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter2 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录2 小时前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
木头没有瓜3 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊4 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass