Vue中使用Element UI的Table组件实现嵌套表格(最简单示例)

以下是一个简单的示例代码,演示如何在Vue中使用Element UI的Table组件实现嵌套表格:

javascript 复制代码
html
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="{ row }">
          <el-table :data="row.subData" style="width: 100%" v-if="row.subData.length > 0">
            <el-table-column prop="subName" label="子项目"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, subData: [{ subName: '子项目1' }, { subName: '子项目2' }] },
        { name: '李四', age: 30, subData: [{ subName: '子项目3' }] }
      ]
    };
  }
};
</script>

上面的代码通过type="expand"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容。

在上面的示例中,我们定义了一个包含姓名和年龄的主表格,以及一个展开列用于显示与每行相关联的子表格。子表格包含一个名为"子项目"的列。通过将row.subData传递给子表格组件,我们可以根据当前行的数据动态渲染子表格。请注意,这只是一个简单的示例,您可能需要根据自己的需求进行适当的调整。

相关推荐
a cool fish(无名)7 分钟前
rust-模块树中引用项的路径
java·前端·rust
前端进阶者17 分钟前
天地图Marker跳一跳动画
前端
火柴就是我21 分钟前
每日见闻之Three.js 根据官方demo 理解相机位置
前端
JosieBook30 分钟前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互
刘大猫.37 分钟前
npm ERR! cb() never called!
前端·npm·node.js·npm install·npmm err·never called
咔咔一顿操作41 分钟前
常见问题三
前端·javascript·vue.js·前端框架
上单带刀不带妹42 分钟前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
电商API大数据接口开发Cris1 小时前
Node.js + TypeScript 开发健壮的淘宝商品 API SDK
前端·数据挖掘·api
还要啥名字1 小时前
基于elpis下 DSL有感
前端
一只毛驴1 小时前
谈谈浏览器的DOM事件-从0级到2级
前端·面试