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
        }
相关推荐
硅谷工具人1 天前
基于element-plus封装table组件
elementui·el-table封装
咚咚咚小柒1 天前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang1 天前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
fsnine1 天前
Python Web框架对比与模型部署
开发语言·前端·python
广州华水科技1 天前
单北斗GNSS形变监测系统在桥梁安全中的应用与技术解析
前端
打小就很皮...1 天前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
IT_陈寒1 天前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit1 天前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢1 天前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
执剑、天涯1 天前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试