動態切換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';
        }
    }