动态切换element-ui表格中每行的icon

参考：https://blog.csdn.net/WYA1993/article/details/88550893

效果图：

　　点击前：

　　点击后：

 

 上代码：

原理：通过判断下一行的属性值type从而动态控制图标的切换，因为如果展开，下一行的type则为2，通过判断type从而判断当前行是否展开，进而切换icon的显示

表格部分：

          <el-table-column prop="name" label="菜单名称">
            <template slot-scope="scope">
              <i
                :class="scope.row.type==1? getIcon(scope.$index):'el-icon-view'"
                :style="scope.row.type==1?'padding-right: 5px;margin-left:0px':'padding-right: 5px;margin-left: 20px'"
              >i>
              <span style="cursor:pointer;" @click="show(scope.$index,scope.row.id)">{{scope.row.name}}span>
            template>
          el-table-column>

方法：

    // 控制icon显示
    getIcon(index){
        console.log(index)
        console.log(this.list.length)
        if(index < this.list.length - 1) {
            if(this.list[index+1].type !== 1) {
                console.log(this.list[index]);
                return 'el-icon-folder-opened';
                
            } else {
                console.log(this.list[index]);
                return 'el-icon-folder';
            }
        }else {
            return 'el-icon-folder';
        }
    }