Form <el-form labelPosition="right" labelWidth="10%" size="small" :model="list" ref="ruleForm" :rules="rules"> <el-form-item label="商家類型"> <el-select ...
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"> <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>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
