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
        }
相关推荐
用户21411832636022 分钟前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
chxii20 分钟前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够32 分钟前
Vue 自适应高度表格
javascript·vue.js·elementui
太过平凡的小蚂蚁2 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫3 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳3 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng4 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪4 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛4 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能4 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端