本文介绍: 这个方法会传入一个参数,用console.info(val)可知,这是这个主表行的记录,根据主表id查询获取子表记录,用this.$set,将子表list放入主表中。用elementuieltable实现主表table实现展开显示关联的明细表table列表数据效果图如下。二.展开行时,会触发 expan-change事件自定义一个expandChange方法用于在展开行时加载明细表数据。三.若要同时实现点击主表行展开明细表,需要添加点击时间。一.开启eltable展开行的功能

elementuieltable实现:主表table可实现展开行显示关联的明细表table的列表数据效果图如下
在这里插入图片描述

    <el-table
      ref="tableData"
      v-loading="listLoading"
      :data="tableData"
      row-key="id"
      border
      stripe
      highlight-current-row
      style="width: 100%"
      max-height="500"
      @row-click="handleRowClick"
      @expand-change="expandChange"
    >
      <el-table-column type="expand"&gt;
        <template slot-scope="scope"&gt;
          <el-table :data="scope.row.tableDetailData" size="mini" style="width: 95%;margin-left: 8%;">
            <el-table-column prop="spotCheckItems" label="点检项目" align="center" />
            <el-table-column prop="spotCheckPattern" label="点检类型" align="center" :formatter="formatterSpotCheckPattern" />
            <el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
            <el-table-column prop="createTime" label="点检日期" align="center" />
          </el-table>
          <el-col :span="24" class="toolbar">
            <el-pagination
              style="float: right"
              :total="scope.row.detailTotal"
              :current-page="detailCurrentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="detailPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleDetailSizeChange"
              @current-change="handleDetailCurrentChange"
            />
          </el-col>
        </template>
      </el-table-column>
      <el-table-column prop="equipmentBarcode" label="设备条码" align="center" />
      <el-table-column prop="equipmentName" label="设备名称" width="150" align="center" />
      <el-table-column prop="createTime" label="点检日期" for align="center" />
      <el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
      <el-table-column prop="workorderNo" label="维保工单号" align="center" />
      <el-table-column prop="maintainResult" label="维保结果" align="center" />
    </el-table>

一.开启el-table展开行的功能
通过设置 type=“expand” 和 Scoped slot 可以开启展开行功能

      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.tableDetailData" >
            <el-table-column prop="spotCheckItems" label="点检项目" align="center" />
            <el-table-column prop="spotCheckPattern" label="点检类型" align="center" :formatter="formatterSpotCheckPattern" />
            <el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
            <el-table-column prop="createTime" label="点检日期" align="center" />
          </el-table>
        </template>
      </el-table-column>

二.展开行时,会触发 expan-change事件自定义一个expandChange方法,用于在展开行时加载明细表数据

    /** 点击主表格行,获取表格明细 */
    expandChange(row) {
      // 设置当前行为选中
      this.$refs.tableData.setCurrentRow(row)
      var obj = {
        recordId: row.id
      }
      this.detailListLoading = true
      SOPTCHECKRECORDAPI.queryEquipSpotCheckRecordDetailList(obj, this.detailCurrentPage, this.detailPageSize).then(
        (res) => {
          this.detailListLoading = false
          this.$set(row, 'tableDetailData', res.data.records)
          this.$set(row, 'detailTotal', res.data.total)
        }
      )
    },

这个方法会传入一个参数,用console.info(val)可知,这是这个主表行的记录,根据主表id查询获取子表记录,用this.$set,将子表list放入主表中

三.若要同时实现点击主表行展开明细表,需要添加点击行时间
@row-click=“handleRowClick”

      // 点击主表行展开明细
    handleRowClick(row, event, column) {
      // tableData为主表table的ref属性
      this.$refs.tableData.toggleRowExpansion(row)
    },

参考文档
element-ui 中 table表格 展开行 的功能
在这里插入图片描述

原文地址:https://blog.csdn.net/weixin_45616483/article/details/131899666

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_18831.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注