<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)
}

elementui+vuejs如何添加表格操作按钮的更多相关文章

  1. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  2. 基于element-ui的后台系统表格、dialog、筛选、自定义按钮、分页的一次性封装

    方便基础业务开发封装的一套组件,基于vue2.5.x和element-ui,可以通过配置自动生成表格展示,表格新增.编辑功能.分页.筛选项.自定义显示表格数据等功能. 先上演示图片 --------- ...

  3. elementUI表单嵌套表格并对每行进行校验

    elementUI表单嵌套表格并对每行进行校验 elementUI 表单嵌套表格并进行校验. 目录 效果展示 代码链接 关键代码 完整代码 效果展示 先看看这是不是需要的效果^_^ ​ 如图,Elem ...

  4. OpenXml入门----给Word文档添加表格

    下面将展示如何使用Openxm向Word添加表格. 代码中表头和数据我用的同一个TableRow来添加,其实可以通过TableHeader来,其实都一样.后面教程我会给出如何设置单元格样式.表头那一行 ...

  5. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  6. VBA添加表格

    Sub 添加表格() ' If MsgBox("要为所有表格添加列吗?", vbYesNo + vbQuestion) = vbYes Then To ActiveDocument ...

  7. C# 在Word中添加表格的方法

    表格是组织整理数据的一种重要手段,应在生活中的方方面面.在Word文档中将繁杂的文字表述内容表格化,能快速.直接地获取关键内容信息.那么,通过C#,我们也可以在Word文档中添加表格,这里将介绍两种不 ...

  8. JQuery动态添加表格,然后动态删除不成功问题

    背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...

  9. Java 在PDF中添加表格

    本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire. ...

随机推荐

  1. LeetCode之“动态规划”:Word Break && Word Break II

     1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...

  2. PS 滤镜算法原理——浮雕效果

    clc; clear all; Image=imread('4.jpg');Image=double(Image);p=3;  %% 控制浮雕的强度 %% 控制浮雕的方向 H=[0 0 p      ...

  3. 最大的k个数问题

    代码来源: http://blog.csdn.net/v_JULY_v 调整堆为小顶堆的代码片:基本思想就是把孩子节点中大的一个跟父节点交换 void HeapAdjust(int array[], ...

  4. rails小重构:将图片加入产品Model

    原先的产品product模式中存放的是图片的url,必须手动将图片存入指定目录中.现在略作改动,在数据库中新建一个pictures表,其设定如下: class CreatePictures < ...

  5. 使用XStream是实现XML与Java对象的转换(2)--别名

    五.使用别名(Alias) 首先,有这样一段Java代码: import java.util.ArrayList; import java.util.List; import com.thoughtw ...

  6. 解决ecshop3.6 H5版本公告页面为空的修改办法

    ecshop3.6公告页面打开如下,页面完全无效果,如下图. 经过简单美化后,有返回按钮,页面加以美化.如下图. 是不是要好看多了.简单修改几步即可. 修改文件 \appserver\resource ...

  7. DB2常用命令小结

    PS:执行命令前需要进入DB2的账户下:su db2inst1 修改密码:更改相应的操作系统密码即可,windows上可以更改db2admin的密码,linux上更改db2inst1的密码即可,db2 ...

  8. java并发包分析之———volitale

    首要结论:volatile 变量提供了线程的可见性,并不能保证线程安全性和原子性. 什么是线程的可见性: 锁提供了两种主要特性:互斥(mutual exclusion) 和可见性(visibility ...

  9. python结巴(jieba)分词

    python结巴(jieba)分词 一.特点 1.支持三种分词模式: (1)精确模式:试图将句子最精确的切开,适合文本分析. (2)全模式:把句子中所有可以成词的词语都扫描出来,速度非常快,但是不能解 ...

  10. 阿里云服务器连接邮箱SMTP服务器time out的解决

    给官方提了个工单,回复如下: 去年9月底开始,出于上级对垃圾邮件管控的要求,新购VPC服务器限制了25端口,我们建议您使用邮件服务商的加密465端口. 或者您查询下所希望访问的发信服务是否提供了像阿里 ...