table表格根据id查询数据下拉展示明细，两种方式

        <el-table-column width="40">
          <template slot-scope="scope">
            <el-button type="text" @click="hangClick(scope.row)">
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </template>
        </el-table-column>
        //下拉后展示的内容
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <el-button type="primary" @click="addRepairDetailDiv(props,'add')">添加维修明细</el-button>
            //添加表单
            <el-form
              v-if="submitType=='add'"
              inline
              class="addRepairDetailForm"
              :model="addRepairDetailForm"
              label-width="80px"
            >
              <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="6" class="grid-content">
                  <el-form-item label="维修人员">
                    <el-input v-model="addRepairDetailForm.CE11" placeholder="维修人员"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-content">
                  <el-form-item label="维修时间">
                    <el-date-picker
                      v-model="addRepairDetailForm.CE10"
                      align="right"
                      type="date"
                      placeholder="维修时间"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="grid-content">
                  <el-form-item>
                    <el-button type="primary" plain @click="submit(props.row)">提交</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            //展示和编辑
            <div v-for="(repairDetail,index) in repairDetails" :key="index" class="repairDetail">
              <el-form inline :model="repairDetailForm" label-width="80px">
                <el-row type="flex" class="row-bg" justify="space-around">
                  <el-col :span="6" class="grid-content">
                    <el-form-item label="维修人员">
                      <el-input
                        v-if="isInput[index]"
                        v-model="repairDetailForm.ce11"
                        placeholder="维修人员"
                      ></el-input>
                      <span v-else class="formSpan">{{repairDetail.CE11||repairDetail.ce11}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="grid-content">
                    <el-form-item label="维修时间">
                      <el-date-picker
                        v-if="isInput[index]"
                        v-model="repairDetailForm.ce10"
                        align="right"
                        type="date"
                        placeholder="维修时间"
                      ></el-date-picker>
                      <span
                        class="formSpan"
                        v-else
                      >{{formatDate(repairDetail.CE10||repairDetail.ce10)}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="grid-content">
                    <el-form-item>
                      <el-button type="primary" @click="submit(repairDetail,index)">确定</el-button>
                      <el-button
                        type="primary"
                        @click="editRepair(repairDetail,index,'edit')"
                      >编辑</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </template>
          <div style="overflow:hidden"></div>
        </el-table-column>

1、<div style="overflow:hidden"></div>,<el-table-column type="expand" width="1">以及<el-table style="margin-left:1px" >是为了隐藏他原本的图标，最后发现并没有什么用，最后在样式里写了.propertybase012Table .el-table__expand-icon{ display: none; }
2、对自己写的箭头没有做处理，最好能做个处理

//展示下拉内容
    hangClick(row) {
    //循环表格数据，对id进行判断
    //toggleRowExpansion可以看下官方文档
      this.crud.data.forEach(item => {
        if (row.rowsid != item.rowsid) {
          this.$refs.table.toggleRowExpansion(item, false);
        }
      });
      this.$refs.table.toggleRowExpansion(row);
      
      this.repairDetailForm = {};
      this.repairRowguid = row.rowguid;
        this.repairDetails = [];
        //这里是掉后台接口，根据id查询对应的数据
        getListByRowGuid(this.repairRowguid).then(res => {
          if (res.length > 0) {
            res.forEach(repairDetail => {
              this.nameToLowerCase(repairDetail);
              if (repairDetail.ce35 == row.rowguid) {
                this.repairDetails.push(repairDetail);
              }
            });
          } else {
            this.repairDetails = [];
          }
        });
    },
    //展示添加的form表单
    //row是当前行的数据，submitType当前form类型
    addRepairDetailDiv(row, submitType) {
      this.submitType = submitType;
      this.addRepairDetailForm = {};
    },
    //展示编辑的form表单
    //row是当前行的数据，index是当前所选择的行的index，submitType当前form类型
    editRepair(row, index, submitType) {
      console.log(row);
      this.submitType = submitType;
      this.repairDetailForm = row;
      let repairDetailDiv = document
        .querySelectorAll("div.repairDetail")
        .item(index);
      let span = this.getElementsByClassName(repairDetailDiv, "formSpan");
      //isInput是展示input输入框的，注意看上面的查看和编辑表单，是一起展示的，需要去判断
      this.isInput[index] = true;
      console.log(this.isInput[index]);
    },
    //提交功能
    submit(row, index) {
      if (this.submitType == "edit") {
        let data = row;
        console.log(data);
        //nameToLowerCase是将对象中的字段转换成小写
        this.nameToLowerCase(data);
        edit(data).then(() => {
          this.isInput = [];
        });
      } else {
        let data = row;
        data.rowsid = undefined;
        delete data.rowsid;
        data.ce35 = this.repairRowguid;
        data.ce11 = this.addRepairDetailForm.CE11;
        data.ce10 = this.addRepairDetailForm.CE10;
        add(data).then(res => {
          this.submitType = "";
          this.repairDetails.push(res);
        });
      }
    },

Vue.prototype.nameToLowerCase=function (object) {
  let regObj = new RegExp("([A-Z]+)", "g");
  for (let i in object) {
      if (object.hasOwnProperty(i)) {
          let temp = object[i];
          if (regObj.test(i.toString())) {
              temp = object[i.replace(regObj, function (result) {
                  return result.toLowerCase();
              })] = object[i];
              delete object[i];
          }
          if (typeof temp === 'object' || Object.prototype.toString.call(temp) === '[object Array]') {
              this.nameToLowerCase(temp);
          }
      }
  }
  return object;
};

以上就是第一种方式，但是着实麻烦，今天刚好又碰到一样的需求，又研究了下
只需要给table标签添加事件，@expand-change="expandChange",有两个参数，第一个是你点击的当前行的数据，第二个是展开行的数组
<div style="overflow:hidden"></div>,<el-table-column type="expand" width="1">以及<el-table style="margin-left:1px" >都不用写，是不是方便多了
下面贴一下第二种方法的代码，主要是函数部分

    expandChange(row, expandedRows) {
      let params = {};
      this.patrolDetails = [];
      this.editForm = {};
      // let lastExpandedRows = expandedRows.pop();
      for (let i = 0; i < expandedRows.length; i++) {
        const item = expandedRows[i];
        if (row.rowsid != item.rowsid) {
          this.$refs.table.toggleRowExpansion(item, false);
        }
      }
      params.rowguid = row.rowguid;
      this.relguid = row.rowguid;
      crudproperty.getListByRowGuid(params).then(res => {
        if (res.length > 0) {
          res.forEach(item => {
            this.nameToLowerCase(item);
          });
          this.patrolDetails = res;
        } else {
          this.patrolDetails = [];
        }
      });
    }