vue el-table 展开行的数据由另一个数组填充

最新推荐文章于 2024-06-25 15:52:18 发布

＊且听风吟

最新推荐文章于 2024-06-25 15:52:18 发布

阅读量1.7k

点赞数

分类专栏： # Vue 2.x

本文链接：https://blog.csdn.net/HH18700418030/article/details/100558967

版权

本文介绍了如何在 Vue 中使用 Element UI 的 el-table 组件，实现展开行功能，且展开行显示的数据来源于另一个独立的数组。通过这种方法，可以灵活地管理和展示表格内的扩展信息。

摘要由CSDN通过智能技术生成

实现 el-table 展开行，展开行的数据由另一个数组填充：

<template>
  <div class="uiot-main">
    <el-table
      highlight-current-row
      class="uiot-table"
      max-height="601"
      size="mini"
      border
      :header-row-style="HeadRowStyle"
      :header-cell-style="HeadCellStyle"
      :cell-style="CellStyle"
      :row-style="RowStyle"
      :default-sort="{prop: 'name', order: 'ascending'}"
      :data="tableData"
      @sort-change="currSortChange"
      @current-change="currRowchange"
      @expand-change="expandChange">
      <el-table-column type="expand">
        <template>
          <el-table class="table-expand" :data="childTableData" >
            <el-table-column prop