vue+elementui后台管理快捷代码片段
2019-04-30 23:39:35来源:博客园 阅读 ()
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"> <template slot-scope="scope"> {{scope.row.traderId}} </template> </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>
原文链接:https://www.cnblogs.com/wang20171212/p/10796127.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css 颜色渐变 兼容性
下一篇:js练习计算器
- 【Vue】状态管理 2020-04-25
- GitHub开源的超棒后台管理面板 2020-04-12
- [开源] 基于Layui组件封装的后台模版,HG-Layui-UI通用后台 2019-12-07
- 【前端开发环境】前端使用GIT管理代码仓库需要掌握的几个必 2019-11-23
- HTML识别后台传输或者js变量中字符串里的 '\n&# 2019-10-08
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash