使用layui+vue实现
<!DOCTYPE html>
<html lang="en">
<head>
<title>案列</title>
<script src="./lib/vue-2.4.0.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://www.layuicdn.com/layui/css/layui.css"
/>
</head>
<body style="background-color: #F0F0F0;">
<div id="app" class="layui-container layui-bg-gray" style="height: 100vh;">
<div class="layui-row" ><h2>添加商品</h2></div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">id: </label>
<div class="layui-input-block">
<input
type="text"
v-model="id"
placeholder="id"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">name:</label>
<div class="layui-input-block">
<input
type="text"
placeholder="name"
v-model="name"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
</div>
<div class="layui-col-md1">
<button
type="button "
class="layui-btn layui-btn-radius"
@click="add"
>
添加
</button>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">搜索</label>
<div class="layui-input-block">
<input
type="text"
placeholder="请输入标题"
v-model="searchKey"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
</div>
</div>
<table class="layui-table">
<colgroup>
<col width="150" />
<col width="200" />
<col />
</colgroup>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in serach(searchKey)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<button
class="layui-btn layui-btn-danger layui-btn-sm"
@click="del(item.id)"
>
删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
id: "",
name: "",
searchKey: "",
list: [
{ id: 1, name: "奔驰", ctime: new Date() },
{ id: 2, name: "宝马x8", ctime: new Date() }
]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name,
ctime: new Date()
});
this.id = '' ;
this.name = '',
},
del(id) {
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1);
return true;
}
});
},
serach(searchKey) {
return this.list.filter(item => {
if (item.name.includes(searchKey)) {
return item;
}
});
}
}
});
</script>
</body">
</html>