实现element-ui的table列表点击只允许一行展开

避免不了使用table,当然table单纯只是展示list数据,项目中遇到需要在table的row中在嵌套一个表格,由于接口做了拆分功能块比较独立,需要先获取list,当点击相应row展开折叠框的时候在获取row对应的下级数据,row还提供编辑功能,修改完之后再次获取list列表。如果同时展开两个折叠框会对table里面嵌套type="expand"的el-table-column里面数据有影响,具体设计如下图

扯了那么多总之只要 保证同时只有一个row的折叠框出现就行，主要使用的方法就是toggleRowExpansion类似于JQ里面的toggleClass，element-ui地址
下面直接上代码再稍微解释一下就很好理解了

<el-table ref="multipleTableAll" @cell-click="clickTable" @selection-change="handleSelectionChange"  v-loading="loading" :data="peopleTables"  @expand-change="changeExpand">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div>
                    <el-table ref="table"  :data="props.row.hourseInfos">
                      <el-table-column label="" width="100" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column align="center" prop="headPic" label="头像" show-overflow-tooltip class="headPic">
                        <template slot-scope="scope">
                          <img class="people-pic" :src="scope.row.headPic?scope.row.headPic:(scope.row.livePic?scope.row.livePic:require('../../../../assets/images/defaultAvatar.jpg'))">
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="固定电话" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tooltip content="双击修改固定电话" placement="top" :open-delay=300>
                    <el-input placeholder="请输入至少8位数字" class="telephone" v-if="isEditTelephone==scope.$index" v-model="v_telephone" autofocus="autofocus" @click.native="preventTelephone" v-on:blur="inputblur(v_telephone,scope.row)" value="">
                    </el-input>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column align="center" label="" width="100">
                <template slot-scope="scope">
                  <el-tooltip content="新增住户" placement="top" :open-delay=300>
                    <span class="iconOperation" @click="handleHouseAdd(scope.row)"><img src="../../../../assets/images/add.png"></span>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>

   // 对应的是@cell-click="clickTable"点击cell时候触发事件
   clickTable (row, column, cell, event) { // 展开事件日志列表
      console.log('获取元素', cell)
      if (cell.cellIndex !== 4 && cell.cellIndex !== 5) {
        this.$refs.multipleTableAll.toggleRowExpansion(row)
      }
    }
    // @expand-change="changeExpand"  打开折叠框触发事件
    changeExpand (row, expandedRows) {
      this.expandedRows = expandedRows
      var that = this
      if (expandedRows.length > 1) {
        this.$refs.multipleTableAll.toggleRowExpansion(this.expandedRows[0])
      } 
      if (this.expandedRows.length > 0) {
        let length = this.expandedRows.length - 1
        this.showHousePeopleList(this.expandedRows[length])
      }
    },

如上，expand-change方法中的两个参数row代表当前行的数据,expandedRows代表所有已展开折叠框行的数据,上面如果已经打开的折叠框也就是判断如果expandedRows的数组长度大于1 就代表要展开第二个,此时就可以使用this.$refs.multipleTableAll.toggleRowExpansion(this.expandedRows[0])也就是对第一个展开式数据进行一个开关的操作。始终保持只会有一个折叠框展开。最后再根据判断如果折叠框打开就调this.showHousePeopleList()中接口获取当前行下面所有数据。
lement-ui的table折叠框展开关闭的ico较小,客户或者产品会要求点击当前行就能展开当前行下面的数据，正好在饿了么UI里面提供了一个@cell-click=""顾名思义点击表格的cell会触发的事件,我们将此方法绑在父级的table中,在cell-click中会有四个参数(row, column, cell, event)，也就是说我在点击单元格的时候也能获取对应行的所有数据再次调用toggleRowExpansion(row)就能实现自由展开折叠。但是实际需求中也可能会需要在cell中做不同的操作,例如进行编辑等。所以在上面clickTable方法中能获取到cell.cellIndex，就可以做个判断,虽然比较low确实很管用,如果第四个cell需要编辑就可以让cell.cellIndex !== 4 ，也就是点击当前行的第四个cell的时候不会调用toggleRowExpansion(row)，就可以在第四个el-table-column添加自定义组件模块进行操作。