element table展开行使展开图标靠近数据位置并有数据时才有展开图标

实现效果

实现过程
1、template

      <el-table
        :data="tableData"
        :header-cell-style="{
          fontSize: '14px',
          background: 'rgba(0,64,239,0.05)',
          fontWeight: 1,
          color: '#666666',
          border: 'unset',
          padding: '3px 0',
        }"
        style="font-size: 14px; color: #000; margin-top: 10px"
        :row-class-name="iconHadler"
        class="topocalTable"
        ref="topocalTable"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <el-row :gutter="20" class="expand-div">
              <el-col :span="6">
                <div class="left-menu">
                  <p
                    @click="props.row.activeIndex = index"
                    v-for="(item, index) of props.row.collectionList"
                    :key="index"
                    :style="
                      props.row.activeIndex === index ? 'color: #5082FA' : ''
                    "
                  >
                    {{ item.mlname }}
                  </p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="right-form">
                  <el-form
                    size="mini"
                    label-position="left"
                    class="demo-table-expand"
                    label-width="100px"
                  >
                    <el-form-item label="来源">
                      <span
                        v-if="
                          !props.row.collectionList[props.row.activeIndex]
                            .editState
                        "
                        >{{
                          props.row.collectionList[props.row.activeIndex].sjly
                        }}</span
                      >
                      <el-input
                        v-else
                        v-model="
                          props.row.collectionList[props.row.activeIndex].sjly
                        "
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="数据">
                      <span
                        v-if="
                          !props.row.collectionList[props.row.activeIndex]
                            .editState
                        "
                        >{{
                          props.row.collectionList[props.row.activeIndex].sjlbmc
                        }}</span
                      >
                      <el-input
                        v-else
                        v-model="
                          props.row.collectionList[props.row.activeIndex].sjlbmc
                        "
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="共享">
                      <span
                        v-if="
                          !props.row.collectionList[props.row.activeIndex]
                            .editState
                        "
                        >{{
                          props.row.collectionList[props.row.activeIndex].gxpc
                        }}</span
                      >
                      <el-input
                        v-else
                        v-model="
                          props.row.collectionList[props.row.activeIndex].gxpc
                        "
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="表">
                      <span
                        v-if="
                          !props.row.collectionList[props.row.activeIndex]
                            .editState
                        "
                        >{{
                          props.row.collectionList[props.row.activeIndex]
                            .sourcetable
                        }}</span
                      >
                      <el-input
                        v-else
                        v-model="
                          props.row.collectionList[props.row.activeIndex]
                            .sourcetable
                        "
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="库">
                      <span
                        v-if="
                          !props.row.collectionList[props.row.activeIndex]
                            .editState
                        "
                        >{{
                          props.row.collectionList[props.row.activeIndex].mbsjk
                        }}</span
                      >
                      <el-input
                        v-else
                        v-model="
                          props.row.collectionList[props.row.activeIndex].mbsjk
                        "
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="量">
                      <span
                        v-if="
                          !props.row.collectionList[props.row.activeIndex]
                            .editState
                        "
                        >{{
                          props.row.collectionList[props.row.activeIndex].sjl
                        }}</span
                      >
                      <el-input
                        v-else
                        v-model="
                          props.row.collectionList[props.row.activeIndex].sjl
                        "
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <img
                    v-if="
                      !props.row.collectionList[props.row.activeIndex].editState
                    "
                    src="../../../assets/icon/icon-edit.png"
                    @click="
                      props.row.collectionList[
                        props.row.activeIndex
                      ].editState = true
                    "
                    title="编辑"
                  />
                  <el-button
                    v-else
                    src="../../../assets/icon/icon-edit.png"
                    style="
                      width: 33px;
                      height: 20px;
                      background: rgba(69, 127, 255, 0.1);
                      border-radius: 3px;
                      font-size: 10px;
                      color: #457fff;
                      padding: 0;
                    "
                    @click="
                      toSave(
                        props.row.collectionList[props.row.activeIndex],
                        props.row.activeIndex,
                        props.$index
                      )
                    "
                    >保存</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="部门">
          <template slot-scope="scope">
            <span
              @click="handleConnection(scope.row)"
              v-show="scope.row.collectionList"
            >
              <i class="el-icon-arrow-right" v-if="!scope.row.expanded"></i>
              <i class="el-icon-arrow-down" v-else></i
            ></span>
            <span :style="scope.row.collectionList ? '' : 'margin-left:15px'">{{
              scope.row.provincialDept
            }}</span>
          </template>
        </el-table-column>
      </el-table>

2、js

    handleConnection(row) {
      row.expanded = !row.expanded;
      this.$refs.topocalTable.toggleRowExpansion(row, row.expanded);
    },
	
    getList() {
      getProvince({
        page: this.index,
        row: this.count,
        month: this.formInline.month,
      }).then((res) => {
        this.tableData = res.data.data.pageInfo.records;
        this.tableData = this.tableData.map((item) => {
          if (item.collectionList) {
            let a = item.collectionList.map((items) => {
              return { ...items, ...{ editState: false } };
            });
            let obj = {
              activeIndex: 0,
              expanded: false,
            };
            item.collectionList = a;
            return { ...item, ...obj };
          }
          return item;
        });
        this.total = res.data.data.pageInfo.total;
        this.allNum = res.data.data.count;
      });
    },

3、css

.expand-div {
  // display: flex;
  padding: 20px 30px 20px 70px;
  .left-menu {
    margin-top: -20px;
  }
  .left-menu p {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .right-form {
    position: relative;
    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(225, 225, 225, 0.5);
    border-radius: 5px;
    padding: 20px;
    .el-input {
      width: 180px;
    }
    img {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .el-button {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
}
::v-deep.right-form .el-form-item__content {
  width: 100%;
}
::v-deep .icon-no .el-table__expand-icon {
  display: none;
}
.el-table__expand-icon {
  font-size: 0;
}