elementui 按钮 表单_element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3
如下图是我要实现的效果：
点击显示 Dialog
:data="gridData"
border
height="300"
>
on-text ="是"
off-text = "否"
on-color="#5B7BFA"
off-color="#dadde5"
v-model="scope.row.menusstate"
@change=change(scope.$index,scope.row)
>
确定
取消
export default {
data() {
return {
dialogTableVisible: false, //是否显示 Dialog
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
gridData:[
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
}
],
}
},
methods:{
change:function(index,row){
console.log(index,row);
}
}
}
.menusStateTrue{
background: #5B7BFA;
color:white;
}
.menusStateTrue:hover{
background: #5B7BFA;
color:white;
}
刚开始没写 template scope="scope"，然后就不知道el-switch中的v-model的值该怎么获取，后面加上 template scope="scope"， v-model="scope.row.menusstate" 就可以达到想要的效果，关于template scope="scope"的解释，可以看下这篇文：
vue中的scope使用详解
elementui 按钮 表单_element UI实现表格中添加开关控制按钮相关推荐
- elementui 按钮 表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
- elementui 按钮 表单_elementUI 学习入门之 Button 按钮
基础按钮用法 按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: 朴素按钮 通过 type 属性指定 primary.success.info.war ...
- elementui 按钮 表单_前后端分离，文件上传下载（springBoot+vue+elementUI）
1.介绍 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
- html表单文本转换,HTML表格中的垂直（旋转）文本
小编典典 .box_rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Ope ...
- vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
- Java根据PDF表单模板和CSV表格批量生成证书等文件
最近遇到需求,需要批量生成800+个证书,所以写了一个简单个工具,原理就是PDF表单,读取csv表格中的数据,然后批量生成,比较通用的一个工具,所以分享一下 import com.itextpdf.t ...
- 基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间 工作日志 正文 基于VUE的ElementUi可视化表单设计器布局器 顶 原 码农苦码农懂 发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
- ElementUI的表单验证及常用规则
element-cn.eleme.io/#/zh-CN/com- 在官网上有关于form组件的详细介绍 这里总结了几个常用的规则,方便下次使用 必填,必选,邮箱,手机号,时间,数字,数组,字符长度, ...
- html表单页脚,HTML 表格
HTML 表格实例: First Name Last Name Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 HTML ...
最新文章
- js实现页面跳转的几种方式
- 域名CNAME 概念
- 2021年春季学期-信号与系统-第十二次作业参考答案-第三小题
- 基于ssm框架的大学生社团管理系统
- 组件(2)：使用Prop下发数据
- SQL基础---SQL SELECT DISTINCT 语句
- vim查看cmd打印的trick
- Cron表达式、定时任务
- html5,用或不用，它都在那里
- MySql事务隔离级别概述
- 生成二维码的三种方式
- 计算机编程英语发音,计算机编程常用英语
- amazon 云平台入门
- Centos7 使用cobbler搭建PXE网络装机服务器安装Centos、Windows、PE、自定义wim镜像
- sfsdfsdffsdf
- Python爬虫:制作一个属于自己的IP代理模块2
- 【19调剂】国家211工程大学、世界一流学科建设高校-福州大学，硕士研究生预调剂通知...
- 037 PHP登录、注册、留言、个人中心设计
- linux 之 vmstat 命令
- 看书籍《欲罢不能》的几点感悟