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

elementui+vuejs如何添加表格操作按钮的更多相关文章
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
- 基于element-ui的后台系统表格、dialog、筛选、自定义按钮、分页的一次性封装
方便基础业务开发封装的一套组件,基于vue2.5.x和element-ui,可以通过配置自动生成表格展示,表格新增.编辑功能.分页.筛选项.自定义显示表格数据等功能. 先上演示图片 --------- ...
- elementUI表单嵌套表格并对每行进行校验
elementUI表单嵌套表格并对每行进行校验 elementUI 表单嵌套表格并进行校验. 目录 效果展示 代码链接 关键代码 完整代码 效果展示 先看看这是不是需要的效果^_^ 如图,Elem ...
- OpenXml入门----给Word文档添加表格
下面将展示如何使用Openxm向Word添加表格. 代码中表头和数据我用的同一个TableRow来添加,其实可以通过TableHeader来,其实都一样.后面教程我会给出如何设置单元格样式.表头那一行 ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- VBA添加表格
Sub 添加表格() ' If MsgBox("要为所有表格添加列吗?", vbYesNo + vbQuestion) = vbYes Then To ActiveDocument ...
- C# 在Word中添加表格的方法
表格是组织整理数据的一种重要手段,应在生活中的方方面面.在Word文档中将繁杂的文字表述内容表格化,能快速.直接地获取关键内容信息.那么,通过C#,我们也可以在Word文档中添加表格,这里将介绍两种不 ...
- JQuery动态添加表格,然后动态删除不成功问题
背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...
- Java 在PDF中添加表格
本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire. ...
随机推荐
- Linux - 用make进行工程编译
首先建立好自己的工作目录 然后创建主函数main.cpp 接着写sinValue.h和cosValue.h函数文件 先按照传统方式进行编译运行 然后用make,先写makefile文件 将原来生成的文 ...
- how tomcat works 总结
希望各位网友在看完<<how tomcat works>>一书或者鄙人的tomcat专栏文章后再看这篇博客 这里主要是梳理各个章节的核心概念 第一章 一个简单的Web服务器 第 ...
- UML类图简介
概述 设计模式中常常使用UML来表示类与类,类与接口之间的关系,UML类图是设计模式入门必备的技能,感觉各种关系比较多,这里做一下总结. 类与接口的表示 类与接口通常是一个矩形框表示,一般分为3层,第 ...
- The 3rd tip of DB QueryAnalyzer
The 3rd tip of DB Query Analyzer Ma Genfeng (Guangdong Unitoll Services incorporated, Guangzhou 510 ...
- 从ruby实现时间服务器ntp同步功能也谈“逆向工程”
本猫以前写asm和C的时候常常不忘"逆向"一把,后来写驱动的时候也用VM之类的搭建"双机"调试环境进行调试:也对于一些小的软件crack cd-key神马的不亦 ...
- Objective-C 空指针和野指针
一.什么是空指针和野指针 1.空指针 1> 没有存储任何内存地址的指针就称为空指针(NULL指针) 2> 空指针就是被赋值为0的指针,在没有被具体初始化之前,其值为0. 下面两个都是空指针 ...
- two sum II
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
- JVM-GC工作原理
配置Garbage Collection 2012-09-17 14:53:18 分类: Java 上面这幅图是我从网络上摘到的,它展现了在一个的理想系统的模型下GC对系统的影响.图的最顶上红色 ...
- Xshell 5 配置上传下载命令
可以在官网https://www.netsarang.com/products/main.html 下载Xshell, 目前最新的版本已经到Xshell 6了 本人记录下安装的目录截图: 安装命令: ...
- FFmpeg备忘录
av_dup_packet函数 av_dup_packet会为destruct指针为av_destruct_packet_nofree的AVPacket新建一个缓冲区,将原有的缓冲区数据拷贝至新缓冲区 ...