动态切换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'; } }