elementui的el-table自定义控制展开事件，实现“展开”“收起”的切换（两种效果）【超级完整式代码】

第一种：多行点击展开其他行不收起

先看效果图

直接上代码
【核心代码添加标注简单易懂】

复制代码

 <el-table
            ref="multipleTable"
            :data="smsLogList.slice((currentPage - 1) * pageSize_, currentPage * pageSize_)"
            tooltip-effect="dark"
            style="width: 100%"
            row-key="id"   【核心代码】
            :expand-row-keys="expands"【核心代码】
          >
            <el-table-column label="短信模板" align="center" prop="templateName" />
            <el-table-column label="接收方" align="center" prop="receiverPhoneNumber" />
            <el-table-column label="发送时间" align="center" prop="sendTime" />
            【展开部分】
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="right" inline class="demo-table-expand">
                  <el-form-item>
                    <span>{{ props.row.templateName }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            【操作列】
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-link
                  style="color:#1890ff"
                  @click="handleRowClick(scope.row)"
                >{{ scope.row.id == expands.filter((val) => val == scope.row.id) ? "收起" : "展开" }}</el-link>
              </template>
            </el-table-column>
          </el-table>

data中定义： expands：[]

handleRowClick(row) {
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter((val) => val !== row.id)
      } else {
        this.expands.push(row.id)
      }
    },

第二种：多行点击展开其他行自动收起：手风琴效果
【修改】标注就是跟第一种代码不同的地方：两处修改

复制代码

 <el-table
            ref="multipleTable"
            :data="smsLogList.slice((currentPage - 1) * pageSize_, currentPage * pageSize_)"
            tooltip-effect="dark"
            style="width: 100%"
            row-key="id" 
            :expand-row-keys="expands"
          >
            <el-table-column label="短信模板" align="center" prop="templateName" />
            <el-table-column label="接收方" align="center" prop="receiverPhoneNumber" />
            <el-table-column label="发送时间" align="center" prop="sendTime" />
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="right" inline class="demo-table-expand">
                  <el-form-item>
                    <span>{{ props.row.templateName }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-link
                  style="color:#1890ff"
                  @click="handleRowClick(scope.row)"
                >{{ scope.row.id == expands[0]) ? "收起" : "展开" }}</el-link>   【修改】
              </template>
            </el-table-column>
          </el-table>

data中定义： expands：[]

handleRowClick(row) {
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter((val) => val !== row.id)
      } else {
        this.expands=[]    【修改】
        this.expands.push(row.id)
      }
    },

隐藏elementUI 展开行 > 图标

复制代码

::v-deep .el-table__expand-icon{
  visibility: hidden;
}

注意

复制代码

  row-key="id"   这里是设置了每行的唯一值，所以表格数组对象中是需要有id的，如果没有可以手动添加

代码

复制代码

 for (let i = 0; i < this.smsLogList.length; i++) {
          this.smsLogList[i].id = i + 1
        }