<body> <div id="app"> <!-- 搜索input --> <input type="text" v-model="searchtext"> <!-- 下拉框 --> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{pleaseselect}}</button> <ul class="dropdown-menu"> <li v-for="(item,index) in goodslist" @click="selectcontent(index)"><a href="#">{{item.goods_brand}}</a> </li> </ul> </div> <!-- 搜索button --> <button type="button" class="btn btn-danger" @click="search">搜索</button> <!-- 表格 --> <table class="table table-hover"> <thead> <tr> <th><input type="checkbox" :checked="isCheckAll" @click="checkall"> 全选</th> <th>照片</th> <th>简介</th> <th>价格</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in goodslist" :key="index"> <th scope="row"><input type="checkbox" :checked="item.isChecked" @click="tocheck(index)"> {{index+1}} </th> <th><img class="img-rounded" style="width: 100px;height: 100px;" :src="item.goods_small_logo" alt=""></th> <th>{{item.goods_name}}</th> <th>¥:{{item.goods_price}}.00</th> <th> <button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus" v-if="item.goods_number<=1" disabled="disabled"></button> <button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus" v-else></button> {{item.goods_number}} <button type="button" @click="add(index,1)" class="glyphicon glyphicon-plus"></button> </th> <th>¥{{item.goods_price*item.goods_number}}</th> <th><span @click="remove(index)" class="glyphicon glyphicon-trash"></span></th> </tr> </tbody> </table> <p>已选{{num}}商品;总计¥{{totalprice}}</p> <!-- 添加表单 --> <form class="form-inline"> <div class="form-group"> <label for="exampleInputEmail2">商品简介</label> <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_name" placeholder="商品简介"> </div> <div class="form-group"> <label for="exampleInputEmail2">价格</label> <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_price" placeholder="价格"> </div> <div class="form-group"> <label for="exampleInputEmail2">数量</label> <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_number" placeholder="数量"> </div> <div class="form-group"> <label for="exampleInputEmail2">照片链接</label> <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_small_logo" placeholder="照片链接"> </div> <div class="form-group"> <label for="exampleInputEmail2">品牌</label> <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_brand" placeholder="品牌"> </div> <button type="button" @click="addshop" class="btn btn-default">添加</button> </form> <br /><br /><br /> </div> <script> const vue = new Vue({ el: '#app', data: { //商品列表 goodslist: [{ "goods_id": 57332, "cat_id": 998, "goods_name": "400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用(10个装)", "goods_price": 14, "goods_number": 1, "goods_weight": 100, "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_800x800.jpg", "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_400x400.jpg", "add_time": 1516662792, "upd_time": 1516662792, "hot_mumber": 0, "isChecked": true, "goods_brand": '海鲜' }, { "goods_id": 57444, "cat_id": 9, "goods_name": "创维(Skyworth)42X6 42英寸10核智能酷开网络平板液晶电视(黑色)", "goods_price": 1899, "goods_number": 1, "goods_weight": 100, "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg", "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg", "add_time": 1516663280, "upd_time": 1516663280, "hot_mumber": 0, "isChecked": false, "goods_brand": '海尔' }, { "goods_id": 57433, "cat_id": 9, "goods_name": "创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视", "goods_price": 3299, "goods_number": 1, "goods_weight": 100, "goods_big_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg", "goods_small_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg", "add_time": 1516663242, "upd_time": 1516663242, "hot_mumber": 0, "isChecked": false, "goods_brand": '华为' }, { "goods_id": 57442, "cat_id": 9, "goods_name": "创维彩电40G6A", "goods_price": 2999, "goods_number": 1, "goods_weight": 100, "goods_big_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg", "goods_small_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg", "add_time": 1516663277, "upd_time": 1516663277, "hot_mumber": 0, "isChecked": false, "goods_brand": 'TCL' }, { "goods_id": 57441, "cat_id": 9, "goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)", "goods_price": 9699, "goods_number": 1, "goods_weight": 100, "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg", "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg", "add_time": 1516663273, "upd_time": 1516663273, "hot_mumber": 0, "isChecked": false, "goods_brand": 'HDR' }], isCheckAll: false, searchtext: '', pleaseselect: "请选择", //添加对象 addfrom: { goods_number: 0, goods_name: '', goods_price: 0, goods_small_logo: '', isChecked: false, goods_brand: '' } }, methods: { //单选 tocheck(index) { this.goodslist[index].isChecked = !this.goodslist[index].isChecked //全选 for (let item of this.goodslist) { if (item.isChecked == false) { this.isCheckAll = false return; } else { this.isCheckAll = true } } }, //全选 checkall() { this.isCheckAll = !this.isCheckAll //console.log( this.isCheckAll) if (this.isCheckAll == true) { this.goodslist.forEach(v => v.isChecked = true) } if (this.isCheckAll == false) { this.goodslist.forEach(v => v.isChecked = false) } }, //添加数量 add(index, m) { this.goodslist[index].goods_number = m + this.goodslist[index].goods_number }, //删除 remove(index) { //console.log(index) this.goodslist.splice(index, 1) }, //search搜索 search() { let m = [] if (this.searchtext != "" && this.pleaseselect != "请选择") { this.goodslist.forEach(v => { if (v.goods_name.match(this.searchtext) != null && v.goods_brand.match(this .pleaseselect) != null) { m.push(v) } }) } else { if (this.searchtext != "") { this.goodslist.forEach(v => { if (v.goods_name.match(this.searchtext) != null) { m.push(v) } }) } else if (this.pleaseselect != "请选择") { this.goodslist.forEach(v => { if (v.goods_brand.match(this.pleaseselect) != null) { m.push(v) } }) } } this.goodslist = m; console.log(this.goodslist) }, //selectcontent选择的内容 selectcontent(index) { this.pleaseselect = this.goodslist[index].goods_brand }, //添加商品 addshop() { this.goodslist.push(this.addfrom) this.addfrom = { goods_number: 0, goods_name: '', goods_price: 0, goods_small_logo: '', isChecked: false, goods_brand: '' } console.log(this.addfrom) console.log(this.goodslist) } }, computed: { //被选的数量 num() { let n = 0; this.goodslist.forEach(v => v.isChecked === true ? n++ : n) return n }, //总价 totalprice() { let n = 0; this.goodslist.forEach(v => v.isChecked === true ? n = n + v.goods_number * v.goods_price : n) return n } } }) </script> </body> </html>