VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript >
  • JavaScript教程之elementui+vuejs如何添加表格操作按钮

<el-table :data="tableData" stripe border style="width:100%" highlight-current-row>
  <el-table-column type="selection" width="55">
  </el-table-column>
  <el-table-column prop="phone" label="手机号" align="center" min-width="120">
  </el-table-column>
  <el-table-column prop="nickname" label="昵称" align="center" min-width="100">
  </el-table-column>
  <el-table-column prop="createTime" label="注册时间" align="center" min-width="120">
  </el-table-column>
  <el-table-column prop="enableState" label="用户状态" align="center" min-width="100">
  </el-table-column>
  <el-table-column prop="tradeState" label="交易状态" align="center" min-width="100">
  </el-table-column>
  <el-table-column label="操作" align="center" min-width="100">
    <template slot-scope="scope">
      <el-button type="text" @click="checkDetail(scope.row.phone)">查看详情</el-button>
      <el-button type="info" @click="modifyUser(scope.row.phone)">修改</el-button>
      <el-button type="info" @click="deleteUser(scope.row.phone)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

//删除用户
deleteUser(val){
  console.log(val)

//这里写相应的逻辑,val是指传进来的参数也就是上面的scope.row.phone;也可以是scope.row.nickname等
},
//修改用户
modifyUser(val){
  let self = this;
},
//查看详情
checkDetail(val){
  console.log(val)
}

 

相关教程