vue+elementui后台管理快捷代码片段
程序员文章站
2022-07-02 17:02:49
Form
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>