vue3 使用element-ui实现el-table懒加载_element ui列表懒加载

目的： 

1.点击表格左侧箭头实现懒加载后端集合数据；

2.后端集合分组每10个展示一行

<template>
  <!-- 
    官网字段解析
    https://element-plus.org/zh-CN/component/table.html
    row-key： 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
    expand-change： 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）
    expand-row-keys： 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
   -->
  <el-table :data="listData" border row-key="code" @expand-change="expandChange" :expand-row-keys="expandedRows">
    <el-table-column type="expand">
      <template #default="scope">
        <div v-if="scope.row.detailList">
          <span style="margin-left: 10px;">展示码值：</span><br />
          <div style="margin-left:60px">
           
            <el-tag-group>
              <template v-for="(tag, index) of scope.row.detailList" :key="tag">
                <!--自定义展示信息（每10个换行）-->
                  <el-tag class="custom-tag" type="success">{{ tag.detailCode }}</el-tag>
                <br v-if="(index + 1) % 10 === 0">
              </template>
            </el-tag-group>
          </div>
          
        </div>
        <div v-else-if="scope.row.loading" style="text-align: center;">加载中...</div>
        <div v-else style="text-align: center;">暂无数据</div>
      </template>
    </el-table-column>
    <el-table-column label="编码" align="center" prop="code" width="auto" />
    <el-table-column label="名称" align="center" prop="name" width="auto" />
  </el-table>
</template>
 
<script setup>
const listData = ref([
  { code: 'code1', name: '名称1' },
  { code: 'code2', name: '名称2' },
  { code: 'code3', name: '名称2' }
]);
 
const expandedRows = ref([]);
 
/**树形点击事件 */
function expandChange(row, expandedRows) {
  const isExpanded = expandedRows.includes(row);
  //判断开启下拉和关闭下拉
  if (!isExpanded) {
    return;
  }
  //加载状态
  row.loading = true;
  //TODO 展示没数据效果
  if(row.code=='code3'){row.loading = false;return;}
 
  //仿照后端接口赋值
  row.detailList = [
    { detailCode: '1111111' }, { detailCode: '2222222' }, { detailCode: '3333333' }, { detailCode: '4444444' }, { detailCode: '5555555' }, { detailCode: '6666666' }, { detailCode: '7777777' }, { detailCode: '8888888' }, { detailCode: '9999999' }, { detailCode: '0000000' },
    { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }, { detailCode: 'ABCDEFG' }
  ];
  //解除加载状态
  row.loading = false;
}
</script>
<style>
.custom-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(10% - 20px);
  margin: 5px 10px 5px 10px;
}
</style>

效果展示：