<iframe allowfullscreen="true" data-mediaembed="bilibili" src="https://player.bilibili.com/player.html?aid=92450219"></iframe>
bandicam 2020-02-28 19-59-01-717
html
<style>
.table {
border: 1px solid rgb(149, 140, 140);
width: 100%;
}
.table thead tr th {
border: 1px solid;
padding-right: 20%;
padding: 10px 5px;
text-align: left;
}
.table tbody tr td {
border: 1px solid;
padding: 12px 7px;
box-sizing: border-box;
}
.header {
width: 100%;
height: 80px;
box-sizing: border-box;
border: 1px solid #ccc;
}
.header span {
display: block;
height: 30px;
background-color: rgba(0, 0, 255, 0.347);
font-weight: bold;
padding: 5px 5px;
}
.header input {
height: 30px;
max-width: 200px;
border-radius: 5px;
border: 1px solid #ccc;
margin-top: 2px;
outline: none;
}
.add {
border: none;
width: 80px;
height: 30px;
outline: none;
}
.light {
background-color: rgb(62, 109, 250);
}
.errTest {
border: 1px solid red !important;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
let App = {
template: `<div id='app'>
<div class='header'>
<span>品牌查询</span>
<strong>Id </strong><input type='text' v-model='id' @blur='test' :class='{errTest:isErr}' />
<strong>Name </strong><input type='text' v-model='name' @keyup.enter='add'/>
<button class='add' @click='add' :class="[this.id != ''? light:'']" :disabled="isDisable">添加</button>
<input type='text' placeholder=" 查询" v-model='query' />
</div>
<table class="table" cellspacing="0">
<colgroup span="1" width="50px"></colgroup>
<colgroup span="1" width="180px"></colgroup>
<colgroup span="2" width="100px"></colgroup>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in search(query)' :key='index' >
<td>{{ item.id }}</td>
<td @dblclick='changeName(index)'><input @blur='getName' v-model='newName' @input='setName(index)' :style="{position:'absolute'}" type='text' v-show = 'index == currentIndex' /><span>{{ item.name }}</span></td>
<td>{{ item.time | dateFormat(true) }}</td>
<td><a href='JavaScript:void(0);' @click='remove(item.id)'>删除</a></td>
</tr>
</tbody>
</table>
</div>`,
data() {
return {
id: '',
name: '',
list: [{
id: 1,
name: '奔驰',
time: new Date(),
}, {
id: 2,
name: '宝马',
time: new Date(),
}],
light: 'light',
isErr: false,
isDisable: false,
query: '',
v: '',
currentIndex: -1,
change: '',
newName: '',
}
},
methods: {
add() {
if (this.name != '' && this.id != '' && this.isErr == false) {
let item = {
id: this.id,
name: this.name,
time: new Date()
};
this.list.push(item);
this.id = this.name = '';
} else {
console.log("not");
}
},
remove(v) {
let index = this.list.findIndex(item => {
if (item.id == v) {
return true;
}
});
this.list.splice(index, 1);
},
test() {
let index = this.list.findIndex(item => {
if (item.id == this.id) {
return true;
}
});
if (index == -1) {
this.isErr = false;
return;
} else {
this.isErr = true;
}
},
search(query) {
return this.list.filter(item => {
// if(item.name.indexOf(query) != -1){
//ES6新提供的方法 includes('要查询的字符串')查到返回true，否则false
if (item.name.includes(query)) {
return item;
}
})
},
changeName(index) {
this.currentIndex = index;
},
setName(index) {
this.list[index].name = this.newName;
},
getName() {
this.currentIndex = -1;
}
}
}
//日期过滤器
Vue.filter('dateFormat', function(msg, parrten = false) {
let t = new Date(msg);
let y = t.getFullYear();
let m = (t.getMonth() + 1).toString().padStart(2,'0');
let d = t.getDate().toString().padStart(2,'0');
if (parrten) {
let hh = t.getHours().toString().padStart(2,'0');
let mm = t.getMinutes().toString().padStart(2,'0');
let ss = t.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
} else {
return `${y}-${m}-${d}`;
}
})
let vm = new Vue({
el: "#app",
components: {
App
},
template: `<App></App>`
})
</script>
</body>