若依 elementui el-table 父子表展示数据

el-table父子表展示数据

最终实现的效果。

实现原理：参考el官方的展开行案例。 

    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>

在父table中加一个<el-table-column type=“expand”。不同的是，demo中是一个el-form，改成el-talbe即可。代码如下。

    <el-table v-loading="loading" :data="broodmList" @selection-change="handleSelectionChange"
      row-key="brebatchnum" @expand-change="expandChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand" >
        <template slot-scope="props">
            <el-table :data="props.row.breBroodsList" size="mini" style="width: 92%;margin-left: 8%;">
              <el-table-column label="舍号" prop="houseid">
                <template #default="{ row }">
                  <span>{{ formatHouse(row.houseid)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="公鸡数" prop="malenum"></el-table-column>
              <el-table-column label="母鸡数" prop="femalenum"></el-table-column>
              <el-table-column label="备注" prop="remark"></el-table-column>
            </el-table>
        </template>
      </el-table-column>
      <el-table-column label=" 锁定" align="center" prop="locked" >

 把子表的size 设为mini。宽度92%，margine-left 8%。这样子表小一些，与父表的行错开一点距离，层次结构更明显一些。

在若依中，父table返回的是一个list，这里我返回的是broodmList，每一行数据中还有一个子表list，我这里是breBroodsList。结构如下。

 

用代码生成器返回的父表list中子list 是 null。也可以修改xml，直接返回完整的数据。

这里就不改了。根据每行数据的ID查询得到该行的完整数据，再设置到父表的list中,即给breBroodsList赋值。

展开行时，会触发 expan-change事件。自定义一个expandChange方法。@expand-change="expandChange"

      /**点击主表格行，获取子表格明细**/
      expandChange(val){
        const brebatchnum= val.brebatchnum;
        if(val.breBroodsList == null){
          console.log("get")
          getBroodm(brebatchnum).then(res=>{
          this.$set(val,'breBroodsList',res.data.breBroodsList)})
        }
      },

此方法会传入一个参数，console.log(val)可知，这是这一行的数据。从中得到ID，我这里的ID是brebatchnum。根据ID可以得到这一条记录的完整数据。

用this.$set，将子表list放入主表中。

这里加一个判断。判断子表list是否为null，为null时再去请求。