vue+elementui后台管理快捷代码片段
Form
<el-form labelPosition="right" labelWidth="10%" size="small" :model="list" ref="ruleForm" :rules="rules">
<el-form-item label="商家类型">
<el-select v-model="traderType" @change="change">
<el-option
v-for="item in Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商家名称" prop="name">
<el-input style="width:50%" v-model="list.name"></el-input>
</el-form-item>
</el-form>
Table
<el-table :data="list" width="100%" align="center">
<el-table-column label="ID" width="100" prop="traderId">
</el-table-column>
<el-table-column label="创建时间" width="100" align="center">
<template slot-scope="scope">
{{scope.row.createTime | dateFilter}}
</template>
</el-table-column>
<el-table-column label="状态" width="100" align="center">
<template slot-scope="scope">
{{scope.row.enabled ? '正常' : '禁用'}}
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="100">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="$router.push({name:'商家详情',params:{id:scope.row.traderId}})">
详情
</el-button>
</template>
</el-table-column>
</el-table> <el-row type="flex">
<el-col v-if='total>0'>
<el-pagination
class="text-right"
@current-change="handleCurrentChange"
:current-page="current"
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
Dialog
<el-dialog
title="添加明细"
:visible.sync="receivableAddVisible"
width="40%"
size="mini">
<el-form :model="addDetailList" labelWidth="120px" :rules="rules" ref=addRule>
<el-form-item label="科目" prop="subject">
<el-input size="small" style="width:80%"
v-model="addDetailList.subject">
</el-input>
</el-form-item>
<el-form-item label="金额" prop="originAmount">
<el-input-number size="small" style="width: 45%;" v-model="addDetailList.originAmount" :precision="this.Price.decimal" :min="0"></el-input-number>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="receivableAddVisible = false">取 消</el-button>
<el-button type="primary" @click="receivableAdd">确 定</el-button>
</div> </el-dialog>
Input
<el-input style="width:50%" placeholder="请输入手机号码" v-model="list.contactPhone"></el-input>
// 文本域
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="list.text" ></el-input>
// 数字
<el-input-number size="small" style="width: 200px;" v-model="list.edAmount" :min="1" :max="chargeBalance"></el-input-number> disabled // 禁用
clearable // 可清空
size
type="textarea" autosize :autosize="{ minRows: 2, maxRows: 4}" <template slot="suffix">号</template> // 尾部
<template slot="prefix">号</template> // 头部
<template slot="append">啊哈哈</template> // 后置
<template slot="prepend">啊啊</template> // 前置
Button
<el-button type="primary" @click="$router.push({name:'添加商家',params:{id:$route.query.traderTypeId}})">添加商家</el-button>
// 多个事件
<el-button type="primary" @click="add(); delete()">添加商家</el-button> type="text" // primary / success / warning / danger / info / text
disabled
:size="mini"
Search
<el-form :inline="true" :model="queryParams" ref="queryParams" size="small" >
<top-edit>
<div slot="left">
<el-form-item>
<el-button type="primary" @click="$router.push({name:'添加商家',params:{id:$route.query.traderTypeId}})">添加商家</el-button>
</el-form-item>
</div>
<div slot="right">
<el-form-item label="名称">
<el-input v-model="queryParams.name" @keyup.enter.native="search"></el-input>
</el-form-item>
<el-form-item label="负责人">
<el-input v-model="queryParams.contactName" @keyup.enter.native="search"></el-input>
</el-form-item>
<el-form-item>
<el-button class="btn-search" type="primary" @click="search">搜索</el-button>
<el-button class="btn-reset" type="primary" @click="reset">重置</el-button>
</el-form-item>
</div>
</top-edit>
</el-form>
vue+elementui后台管理快捷代码片段的更多相关文章
- Vue + ElementUI 后台管理模板推荐
最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...
- vue+element-ui后台管理系统模板
vue+element-ui后台管理系统模板 前端:基于vue2.0+或3.0+加上element-ui组件框架 后端:springboot+mybatis-plus写接口 通过Axios调用接口完成 ...
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
- 使用Github来管理的代码片段
代码片段介绍 xcode4引入了一个新feature: code snippets,在整个界面的右下角,可以通过快捷键:cmd + ctrl + opt + 2 调出来.code snippets是一 ...
- 手摸手,带你用vue实现后台管理权限系统及顶栏三级菜单显示
手摸手,带你用vue实现后台管理权限系统及顶栏三级菜单显示 效果演示地址 项目demo展示 重要功能总结 权限功能的实现 权限路由思路: 根据用户登录的roles信息与路由中配置的roles信息进行比 ...
- 从零开始搭建vue+element-ui后台管理系统项目到上线
前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...
- 项目:Vue+node+后台管理项目小结
序:本文主要分两块说:项目机制,具体用到的知识块. 1. 项目机制 项目的原型以vue-cli为原型,进行项目的初步构建.项目以node.js服务和webpack打包机制为依托,将.vue文件打包为浏 ...
- 设置VS快捷代码片段
一.自定义sinppets方式 1.在VS安装路径[D:\vs2013\VC\Snippets\2052\Visual C++]下新建一个snippt文件 2.添加代码 <?xml versio ...
- 换个思维,boot结合vue做后台管理
可以添加,可以删除.动态的添加数据. 不用操作dom,只要操作json数据即可. <form class="form-horizontal addForm" id=" ...
随机推荐
- CSS: body{font-size: 62.5%;}设置原因
参考博客:http://www.cnblogs.com/daxiong/articles/2772276.html 在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置,为 ...
- Devexpres下窗体带阴影的边框效果
public partial class Form1 : DevExpress.XtraEditors.XtraForm { public Form1() { InitializeComponent( ...
- [html][javascript] Cookie
更多可参考:http://www.cnblogs.com/newsouls/archive/2012/11/12/2766567.html // 读 cookie 方法 function getCoo ...
- 常见的加密和解密算法—AES
一.AES加密概述 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用 ...
- jdbc练习demo
//连接云端服务器数据库工具类 public class TestJDBCUtil { public static String driver="com.mysql.jdbc.Driver& ...
- 《OpenCL异构并行编程实战》补充笔记散点,第一至四章
▶ 总体印象:适合 OpenCL 入门的书,有丰富的代码和说明,例子较为简单.先把 OpenCL 代码的基本结构(平台 → 设备 → 上下文 → 命令队列 → 创建缓冲区 → 读写缓冲区 → 编译代码 ...
- 372. Super Pow.txt
▶ 指数取模运算 ab % m ▶ 参考维基 https://en.wikipedia.org/wiki/Modular_exponentiation,给了几种计算方法:暴力计算法,保存中间结果法(分 ...
- Spring Boot实践——AOP实现
借鉴:http://www.cnblogs.com/xrq730/p/4919025.html https://blog.csdn.net/zhaokejin521/article/detai ...
- TColor转化为字符串
procedure TForm1.Button1Click(Sender: TObject); begin Memo1.Lines.Add(ColorToString(clRed)); Memo1.L ...
- php7源码编译安装
以下以CentOS 7.2为例,安装php的运行环境,首先打开php官网http://php.net/点击导航栏的Downloads进入下载页面:http://php.net/downloads.ph ...