<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
#form {
text-align: center;
}
table,
th,
td {
border: 1px solid #7a7979;
}
table {
margin: 10px auto;
border-collapse: collapse;
}
th,
td {
padding: 15px;
}
tr:last-child {
text-align: left;
}
button {
padding: 10px;
background-color: rgb(74, 170, 138);
color: #fff;
border-radius: 5px;
border: none;
cursor: pointer;
}
#header {
margin: 0 auto;
display: flex;
width: 300px;
height: 40px;
}
input {
flex: 1;
margin: 0 20px;
border-radius: 5px;
border: 1px solid #757575;
}
span {
line-height: 40px;
}
</style>
</head>
<body>
<div id="app">
<info-table :titles="titles" :info="info" @fn="fatherdel" @fn1="fathersearch" @fn2="show">
</info-table>
</div>
<template id="temp">
<div id="form">
<div id="header">
<span>名称</span><input type="text" @input="clearfn" v-model="searchStr"><button
@click="search">查询</button>
</div>
<table>
<tr>
<th v-for="item in titles">{{item}}</th>
</tr>
<tr v-for="item,index in info" v-show="item.is_show">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.price_info.toFixed(2)}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
<tr>
<td colspan="4">总价为:{{total | Rformat}}</td>
</tr>
</table>
</div>
</template>
<script>
let infoTable = {
template: '#temp',
props: ['titles', 'info'],
data() {
return {
searchStr: ''
}
},
filters: {
Rformat(val) {
return '￥' + val.toFixed(2) + '元'
}
},
methods: {
del(i) {
this.$emit('fn', i)
},
search() {
this.$emit('fn1', this.searchStr)
},
clearfn() {
if (this.searchStr) {
return
}
this.$emit('fn2')
}
},
computed: {
total: {
get() {
// var rets = this.info.filter((item, index, self) => {
// return item.is_show
// })
var ret = this.info.reduce((pre, cur, index, self) => {
return cur.is_show ? pre + cur.price_info : pre
}, 0)
return ret
},
set(newVal) {
console.log(newVal);
}
}
}
}
new Vue({
el: '#app',
data: {
titles: ["ID", "主标题", "起步价格", "操作"],
info: [{
"id": 287,
"title": "严选新式样板间",
"price_info": 29.9,
"is_show": true
}, {
"id": 286,
"title": "无“油”无虑的甜蜜酥脆",
"price_info": 45,
"is_show": true
}, {
"id": 283,
"title": "孩子成长中少不了的一双鞋",
"price_info": 78,
"is_show": true
}, {
"id": 282,
"title": "成就一室笋香1",
"price_info": 121,
"is_show": true
}, {
"id": 281,
"title": "条纹新风尚",
"price_info": 29,
"is_show": true
}, {
"id": 277,
"title": "治愈生活的满怀柔软",
"price_info": 66.78,
"is_show": true
}, {
"id": 274,
"title": "没有软木拖，怎么过夏天",
"price_info": 50.99,
"is_show": true
}, {
"id": 272,
"title": "料理也要精细简单",
"price_info": 69,
"is_show": true
}, {
"id": 271,
"title": "选式新懒人",
"price_info": 15.3,
"is_show": true
}, {
"id": 268,
"title": "米饭好吃的秘诀：会呼吸的锅",
"price_info": 20.1,
"is_show": true
}]
},
components: {
infoTable
},
methods: {
fatherdel(i) {
this.info.splice(i, 1)
},
fathersearch(val) {
this.info.forEach(item => {
item.is_show = item.title.includes(val) ? true : false
});
},
show() {
this.info.forEach(item => {
item.is_show = true
});
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号