el_table实现点击展开表格

原创

安德玛

发布于 2022-03-06 12:20:23

1.2K0

发布于 2022-03-06 12:20:23

业务场景：

很多情况下我们后台查询的数据需要显示在table中的时候，由于数据分类比较多，导致一个table无法很好的完整显示所有的属性信息，这个时候我们就需要让主要的数据信息显示在table界面上，然后点击table行，可以具体查看该行的所有详细数据

实现方法

利用el_table的expand属性实现

<el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            border
            :data="props.row.dataitems"
            v-loading="loading">
            <el-table-column label="名称" align="center" prop="name_cn" />
            <el-table-column label="值" align="center" prop="value" />
            <el-table-column label="单位" align="center" prop="unit" />
          </el-table>
        </template>
      </el-table-column>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。