zoukankan      html  css  js  c++  java
  • 动态切换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';
            }
        }
  • 相关阅读:
    SSH-框架工作笔记
    Ajax基础
    Hibernate基础
    Struts1 中的国际化
    MyEclipse中的快捷键
    Oracle_存储过程
    oracle_开发子程序和包
    常用的正则表达式
    jQuery中的事件
    AcWing 1118. 分成互质组
  • 原文地址:https://www.cnblogs.com/flypig666/p/12526371.html
Copyright © 2011-2022 走看看