zoukankan      html  css  js  c++  java
  • element-ui el-dropdown 结合el-table 的用法(传递当条表格的row)

    先看效果图吧

    html部分写法

    <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-dropdown placement="bottom" trigger="click">    //placement=""bottom"  这是弹出的位置,详情可见参数配置  trigger="click" 为点击方式,删除为hover方式
                    <span class="el-dropdown-link">
                      <i class="el-icon-s-tools"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-if="scope.row.reviewStatus == 101" @click.native="handleDetails(scope.$index,scope.row)">编辑</el-dropdown-item>   //注意:直接写@click是无效的,需要加上修饰符 .native    括号里面的就是点击当条数据的所有参数
                      <el-dropdown-item v-else @click.native="handleDetails(scope.$index,scope.row)">详情</el-dropdown-item>
                      <el-dropdown-item @click.native="deletes(scope.$index,scope.row)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>

    js部分

    handleDetails (index, row) {
      console.log(index,row)  
    }
  • 相关阅读:
    tp5.1 多级控制器
    JS中三个点(...)是什么鬼?
    vue reqwest与fetch的使用
    new Vue({ render: h => h(App), }).$mount('#app')到底什么意思
    ant design vue 表格和国际化的使用
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
  • 原文地址:https://www.cnblogs.com/tlfe/p/13231782.html
Copyright © 2011-2022 走看看