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>

View Code

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>

View Code

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>

View Code

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> // 前置

View Code

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"

View Code

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>

View Code

 

来源：oschina

链接：https://my.oschina.net/u/4287650/blog/3553857