el_table实现点击展开表格

2022-03-06 12:20:23 浏览数 (2)

业务场景:

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

实现方法

利用el_table的expand属性实现

代码语言:javascript复制
<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>

0 人点赞