第六十四篇：写一个多功能表格
好家伙,结合前面的内容,实践一下
好了,现在要结合前面学的知识写一个小案例
我想这是一个列表
产品需求:
1.有id,姓名,是否启用,时间,这四个属性的显示(v-model,{{}}插值表达式,v-if,v-else,v-for)
2.有删除功能(v-model,v-on,filter)
3.有添加功能(v-model,push,this)
好了,开搞
1.属性显示
大概的模板先搞出来
<body>
<div id="app">
<div>
<p>进行属性添加</p>
<form action="">
<div>
<input type="text">
<button>提交</button>
</div>
</form>
</div>
<table>
<thead>
<th>id</th>
<th>品牌</th>
<th>是否禁用</th>
<th>时间</th>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id" >
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<div>
<input type="checkbox" id="sustomSwitch1" v-model="item.status">
<label for="coutomSwitch1" v-if="item.status">已启用</label>
<label for="coutomSwitch1" v-else>已禁用</label>
</div>
</td>
<td>{{ item.time }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
list:[
{ id:1,name:'宝马',status:true,time: new Date() },
{ id:2,name:'奔驰',status:true,time: new Date() },
{ id:3,name:'奥迪',status:true,time: new Date() },
],
},
methods:{
}
})
</script>
</body>
页面显示如下:
是丑了点,
"是否禁用"这一项要拿出来说一下:
<div>
<input type="checkbox" id="sustomSwitch1" v-model="item.status">
<label for="coutomSwitch1" v-if="item.status">已启用</label>
<label for="coutomSwitch1" v-else>已禁用</label>
</div>
注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
这里我们让两个<label>标签都为前面的<input>服务
<input>是"checkbox"类型的,所以可以用"item.status"控制真假
随后用v-model进行绑定,配合 "v-if" 和 "v-else" 就可以进行禁用状态和启用状态的切换,
2.添加删除功能
<body>
<div id="app">
<div>
<p>进行属性添加</p>
<form action="">
<div>
<input type="text">
<button>提交</button>
</div>
</form>
</div>
<table>
<thead>
<th>id</th>
<th>品牌</th>
<th>是否禁用</th>
<th>时间</th>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id" >
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<div>
<input type="checkbox" id="sustomSwitch1" v-model="item.status">
<label for="coutomSwitch1" v-if="item.status">已启用</label>
<label for="coutomSwitch1" v-else>已禁用</label>
</div>
</td>
<td>{{ item.time }}</td>
<td>
<a href="javascript:;" @click="remove(item.id)">删除</a>//href="javascript:;"表示什么都不执行
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
list:[
{ id:1,name:'宝马',status:true,time: new Date() },
{ id:2,name:'奔驰',status:true,time: new Date() },
{ id:3,name:'奥迪',status:true,time: new Date() },
],
},
methods:{
remove(id){
this.list=this.list.filter(item=>item.id!==id)
//当前id不等于要删的id,把item项过滤出来,放回到数组里面去,
//数组变空,变相实现了删除的功能
}
}
})
</script>
</body>
为删除绑定一个remove方法,随后使用过滤器将其"删除"
没毛病:
搞定!
3.实现添加功能
好家伙,这个还挺难的
"添加"功能的核心业务:
往list的尾部添加数据!
步骤:
1.把要添加的品牌对象整理出来
2.把这个对象往list数组中push
好了,最终版本出来了
<body>
<div id="app">
<div>
<p>进行属性添加</p>
<form @submit.prevent="add">
<div>
<input type="text" placeholder="请输入品牌" v-model.trim="brand"> //.trim用于去除前后空格
<button type="submit">提交</button>
</div>
</form>
</div>
<table>
<thead>
<th>id</th>
<th>品牌</th>
<th>是否禁用</th>
<th>时间</th>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id" >
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<div>
<input type="checkbox" id="sustomSwitch1" v-model="item.status">
<label for="coutomSwitch1" v-if="item.status">已启用</label>
<label for="coutomSwitch1" v-else>已禁用</label>
</div>
</td>
<td>{{ item.time }}</td>
<td>
<a href="javascript:;" @click="remove(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
brand:'',
//输入品牌名称
nextId:4,
//此为下一个可用的id
list:[
{ id:1,name:'宝马',status:true,time: new Date() },
{ id:2,name:'奔驰',status:true,time: new Date() },
{ id:3,name:'奥迪',status:true,time: new Date() },
],
},
methods:{
remove(id){
this.list=this.list.filter(item=>item.id!==id)
//当前id不等于要删的id,把item项过滤出来,放到新数组里面去,
//数组变空,变相实现了删除的功能
},
add(){
console.log('成功')//测试
if(this.brand==='') return alert('必须填写品牌名称!')
//1.把要添加的品牌对象整理出来
const obj ={
id:this.nextId,
name:this.brand,
status:true,
time:new Date()
}
//2.往this.list数组中push步骤1中得到的对象
this.list.push(obj)
//3.清空this.brand;让this.nextId自增+1
this.brand =''
this.nextId++
}
}
})
</script>
</body>
搞定
我们把前三项都删掉,再随意添加两项
来看看效果:
搞定,
小细节,关于<form @submit.prevent="add">
<from>标签中使用.prevent修饰符取消刷新
不用element ui,实现这个感觉还挺有意思的,(难看是难看了点)
That's all
