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=" ...
随机推荐
- HDU 2143 Can you find it?(基础二分)
Can you find it? Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/10000 K (Java/Others ...
- mysql 5.6.15升级到5.6.43
今天闲来无事,观察测试环境的zabbix服务器,发现内存泄漏严重,于是重启了,想起了前几天写的帖子发生了严重的内存泄漏可以把mysql升级到最新的小版本 于是乎就试着升级 old version:5. ...
- js 获取下一秒 时间
function getNextTime(start){ //var start = '09:30:00'; var _s = new Date(); var startDate = _s.getFu ...
- C++指针的长度
每台计算机都有字长,指明指针数据的标称大小----来自深入理解计算机系统 每台计算机的字长指明了它的虚拟空间大小.比如32位的机器,虚拟空间地址为0~2^w-1程序最多访问2^w个字节 对于32位程序 ...
- 菜单与内容下拉jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用libcurl显示下载进度
使用libcurl显示下载进度 http://blog.csdn.net/zhouzhenhe2008/article/details/53876622
- Cocoa Touch(五):网络请求 NSURLSession/AFNetworking, GCD, NSURLResquest
NSURLRequest 网络请求的关键的就是NSURLRequest类,它的实例表示了请求报文实体以及请求的缓存策略等等,各种网络框架的最终目标都是把这个对象编译成为请求报文发送出去.下面用一个实例 ...
- 完全使用ASP.NET实现的省市区级联效果
本功能特点:下级的显示和数据的加载都是由上一级下拉框的SelectedIndexChanged触发的,在上级下拉框没有选择之前,下级不会出现,用户体验比较好.无刷新方面,采用AJAX技术,在数据选择的 ...
- Golang之interface(多态,类型断言)
多态用法 package main //一种事物的多种形态,都可以按照统一的接口进行操作 //多态 import ( "fmt" "math/rand" &qu ...
- <!DOCTYPE html>的重要性!
噩梦开始的源头:之前写html或者jsp页面,从来不注意doctype的声明,也不太明白doctype的作用. 直到最近碰到了一个非常奇葩的bug:某一个页面在IE7和8,Chrome,ff等下正常, ...