vue element-ui el-table expands 更换图标动态设置展开折叠

最新推荐文章于 2024-07-18 17:54:45 发布

晟晟今天吃可爱多了没有

最新推荐文章于 2024-07-18 17:54:45 发布

阅读量1.4k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_43638614/article/details/129314059

版权

效果图
在这里插入图片描述

1.外部table中添加expand列的行数据key和对应的值

row-key="id" :expand-row-keys="expands"

在这里插入图片描述
2.data中新增一个列表，存放要展开的expand的key

expands: [],

在这里插入图片描述
3.编写触发方法showExpands

<img v-if="!scope.row.expandsOpened" @click="showExpands(scope.row)" style="width: 15px;height: 15px;margin-left: 12px;position: absolute;margin-top: 3px;" src="../../../assets/images/zhankai.png"></img>
<img v-else @click="showExpands(scope.row)" style="width: 15px;height: 15px;margin-left: 12px;position: absolute;margin-top: 3px;" src="../../../assets/images/shouqi.png"></img>

4.编写showExpands方法，未展开时，点击后添加当前行id到expands数组中，图片显示为-；展开时，点击后expands数组清空，图片显示为+

showExpands(row) {
      if (this.expands.indexOf(row.id) < 0) {
        this.expands = [];
        this.expands.push(row.id);
        row.expandsOpened=true
      } else {
        this.expands = [];
        row.expandsOpened=false
      }
    },

在这里插入图片描述