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
        }
相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript