vue列表&添加&修改
Posted tang0125
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue列表&添加&修改相关的知识，希望对你有一定的参考价值。
1 <template> 2 <el-main> 3 4 <el-form :inline="true" :model="queryForm" class="demo-form-inline"> 5 <el-form-item label="单号"> 6 <el-input v-model="queryForm.no" placeholder="单号"></el-input> 7 </el-form-item> 8 <el-form-item label="商品名称"> 9 <el-select v-model="queryForm.gid" placeholder="商品名称"> 10 <el-option :label="goodes.gname" :value="goodes.id" v-for="goodes in goodesList"></el-option> 11 12 </el-select> 13 </el-form-item> 14 <el-form-item> 15 <el-button type="primary" @click="onSubmit">查询</el-button> 16 </el-form-item> 17 </el-form> 18 19 <el-button size="mini" @click="add()">添加</el-button> 20 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> 21 <el-table-column type="selection" width="55"> 22 </el-table-column> 23 24 <el-table-column prop="id" label="#" width="80"> 25 </el-table-column> 26 27 <el-table-column prop="no" label="单号" width="80"> 28 </el-table-column> 29 30 <el-table-column label="日期" width="80"> 31 <template slot-scope="scope">{{ scope.row.date }}</template> 32 </el-table-column> 33 34 <el-table-column prop="warehourse" label="仓库" width="80"> 35 </el-table-column> 36 37 <el-table-column prop="type" label="类型" width="80"> 38 </el-table-column> 39 40 <el-table-column prop="gname" label="商品名称" width="80"> 41 </el-table-column> 42 43 <el-table-column prop="price" label="单价" width="80"> 44 </el-table-column> 45 46 <el-table-column prop="amount" label="数量" width="80"> 47 </el-table-column> 48 49 <el-table-column prop="sum" label="总金额" width="80"> 50 </el-table-column> 51 52 <el-table-column prop="name" label="供应商名称" width="80"> 53 </el-table-column> 54 55 <el-table-column prop="contacts" label="联系人" width="80"> 56 </el-table-column> 57 58 <el-table-column prop="telephone" label="联系电话" width="80"> 59 </el-table-column> 60 61 <el-table-column label="操作"> 62 <template slot-scope="scope"> 63 <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button> 64 <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> 65 </template> 66 </el-table-column> 67 68 </el-table> 69 70 <el-pagination :current-page="queryForm.pageNum" :page-count="pageCount" @current-change="gotoPage" layout="prev, pager, next"> 71 </el-pagination> 72 </el-main> 73 </template> 74 75 <script> 76 export default { 77 data() { 78 return { 79 goodesList: [], 80 tableData: [], 81 queryForm: { 82 pageNum: 1, 83 pageSize: 3 84 }, 85 pageCount: 1 86 } 87 }, 88 methods: { 89 //添加 90 add(){ 91 this.$router.push("/update/0"); 92 }, 93 listGoodes() { 94 this.axios.get("http://localhost:8090/goodes/listGoodes").then(res => { 95 this.goodesList = res.data; 96 }) 97 }, 98 handleSelectionChange() { 99 100 }, 101 //删除 102 handleDelete(id) { 103 104 }, 105 //修改 106 handleEdit(id) { 107 this.$router.push("/update/"+id); 108 }, 109 gotoPage(pageNum) { 110 this.queryForm.pageNum = pageNum; 111 this.list(); 112 }, 113 onSubmit() { 114 this.queryForm.pageNum = 1; 115 this.list(); 116 }, 117 list() { 118 this.axios.get("http://localhost:8090/record/list", { 119 params: this.queryForm 120 }).then(res => { 121 this.tableData = res.data.list; 122 this.queryForm.pageNum = res.data.pageNum; 123 this.pageCount = res.data.pages; 124 }) 125 } 126 }, 127 created() { 128 this.list(); 129 this.listGoodes(); 130 } 131 } 132 </script> 133 134 <style scoped> 135 136 </style>
1 <template> 2 <el-main> 3 <el-form ref="form" :model="form" label-width="80px"> 4 5 <el-form-item label="单号"> 6 <el-input v-model="form.no"></el-input> 7 </el-form-item> 8 9 <el-form-item label="类型"> 10 <el-select v-model="form.type" placeholder="请选择类型"> 11 <el-option label="入库" value="入库"></el-option> 12 <el-option label="出库" value="出库"></el-option> 13 </el-select> 14 </el-form-item> 15 16 <el-form-item label="日期"> 17 <el-col :span="11"> 18 <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker> 19 </el-col> 20 </el-form-item> 21 22 <el-form-item label="仓库"> 23 <el-input v-model="form.warehourse"></el-input> 24 </el-form-item> 25 26 <el-form-item label="商品名称"> 27 <el-select v-model="form.gid" placeholder="商品名称"> 28 <el-option :label="goodes.gname" :value="goodes.id" v-for="goodes in goodesList"></el-option> 29 </el-select> 30 </el-form-item> 31 32 <el-form-item label="单价"> 33 <el-input v-model="form.price"></el-input> 34 </el-form-item> 35 36 <el-form-item label="数量"> 37 <el-input v-model="form.amount"></el-input> 38 </el-form-item> 39 40 <el-form-item label="总金额"> 41 <el-input v-model="form.sum"></el-input> 42 </el-form-item> 43 44 <el-form-item label="供应商名称"> 45 <el-select v-model="form.sid" placeholder="商品名称"> 46 <el-option :label="sup.name" :value="sup.id" v-for="sup in supplierList"></el-option> 47 </el-select> 48 </el-form-item> 49 50 51 <el-form-item> 52 <el-button type="primary" @click="onSubmit">立即创建</el-button> 53 <el-button>取消</el-button> 54 </el-form-item> 55 </el-form> 56 </el-main> 57 </template> 58 59 <script> 60 export default { 61 data(){ 62 return{ 63 supplierList:[], 64 goodesList:[], 65 form:{ 66 67 } 68 } 69 }, 70 methods:{ 71 onSubmit(){ 72 this.axios.post("http://localhost:8090/record/save",this.form).then(res=>{ 73 this.$router.push("/Record"); 74 }) 75 }, 76 listSupplier(){ 77 this.axios.get("http://localhost:8090/supplier/listSupplier").then(res => { 78 this.supplierList = res.data; 79 }) 80 }, 81 listGoodes() { 82 this.axios.get("http://localhost:8090/goodes/listGoodes").then(res => { 83 this.goodesList = res.data; 84 }) 85 }, 86 }, 87 created() { 88 this.listGoodes(); 89 this.listSupplier(); 90 let params=this.$route.params; 91 if(params.id>0){ 92 this.axios.get("http://localhost:8090/record/selectOne",{params:{id:params.id}}).then(res=>{ 93 this.form=res.data; 94 }) 95 } 96 } 97 } 98 </script> 99 100 <style scoped> 101 102 </style>
以上是关于vue列表&添加&修改的主要内容，如果未能解决你的问题，请参考以下文章
Vue电商后台管理系统项目第5篇-角色列表的增删改查&&角色授权