欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>