elementui的table展开行显示另一关联子table表的数据

​​​​​需求：主表table可实现展开行显示关联子table的列表数据​

<div class="table-box">
          <el-table
            ref="enquiry"
            :data="dataList"
            :expand-row-keys="expands"
            :row-key="getRowKeys"
            @row-click="handleRowClick"
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table
                  :data="scope.row.dataFileList"
                >
                  <el-table-column
                    prop="fileName"
                    label="附件名称"
                    width="300"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fileSize"
                    label="附件大小"
                    width="80"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              prop="id"
              label="主键ID"
              width="30"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="title"
              label="主表字段1"
              width="120"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
<script>
import axios from 'axios'
export default {
   name: 'Param',
   data() {
      return {
        dataList: [],
        dataFileList: [],
        expands: []
    }
  }
}
</script>

一、开启table展开行功能

        这个就简单了，在table首列添加一列如下，关键属性type="expand"  slot-scope="scope"

<el-table-column type="expand">
              <template slot-scope="scope"> 
                        //展开的关联table内容
                        <el-table
                          :data="scope.row.dataFileList"
                        >
                        </el-table>
                </template>
  </el-table-column>

二、目前只能点击前边括号展开，若要同时实现点击整行展开，只需添加点击行属性@row-click="handleRowClick"

methods: {
    handleRowClick(row, event, column) {
       //enquiry为主表table的ref属性值
      this.$refs.enquiry.toggleRowExpansion(row)
    }
}

三、动态展示主表table数据,请求后台接口,给dataList赋值，同时渲染展开行需要展示的关联子table数据

mounted() {
    this.getDataList()
},
methods: {
    getRowKeys(row) {
        return row.id
    },
    getDataList() {
        axios.get('/url').then(function (res) {
             this.dataList = data.list
         }).catch(function (err) {
             console.log(err);
         })
    },
    getChildenList() {
      //遍历主表dataList
      this.dataList.forEach((temp, index) => {
        //请求子表后台接口
        axios.post('/childenUrl', {
            relatedId: temp.id
          }).then(res => {
          this.dataList[index].dataFileList = res.list
          //如果需要默认展开所有行，将:row-key="getRowKeys"得到的Id添加到expands数组
          //直接使用属性default-expand-all会使子表数据显示不出来，索性全部加到this.expands
          this.expands.push(temp.id)
        }).catch(e => {
        })
      })
    }, 
}