需求如上图
本人是前端新人,刚看完一遍基础vue2,于是找了一个以前js做过的小demo打算用vue复现一次。做的时候刚好踩了一些vue的坑,打算分享出来。
因为是一个小demo,且主要重点是放在实现的功能上,所以样式可能不是很好看,主要是把要求的功能实现出来。
首先是布局`
<template>
<div>
<div class="header">
<el-input placeholder="请输入任务" v-model="input" clearable> </el-input>
<el-button type="info" @click="add">添加</el-button>
</div>
<div class="table1">
<ul>
<li @click="isok(item.id)" v-for="item in tableData" :key="item.id">
<i ref="trefs" class="el-icon-check"></i>
{{ item.shijian }}
<i class="el-icon-circle-close" @click.stop="deletedata(item.id)"></i>
</li>
</ul>
</div>
</div>
</template>
样式
<style lang="less" scoped>
.header {
width: 1000px;
height: 150px;
background-color: red;
margin: 50px auto;
margin-bottom: 0;
}
.el-input {
width: 500px;
margin: 100px 0;
margin-left: 250px;
}
.table1 {
margin: 0 auto;
width: 1000px !important;
}
.el-table {
margin-top: 0 !important;
}
li {
margin: 0;
padding: 0;
list-style: none;
height: 50px;
line-height: 50px;
background-color: whitesmoke;
position: relative;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.el-icon-circle-close {
position: absolute;
right: 0;
top: 18px;
}
.el-icon-check {
visibility: hidden;
}
</style>
然后是功能模块
第一个功能是添加代办事项。这个很好实现,只需要用v-model绑定input表单元素,把每个表单元素在click事件触发的时候push进代办事项数组就行了。注意的的是在push表单元素的时候,一定要给每个元素在绑定一个独一无二的id值,具体原因下面再说。
代码:
export default {
data() {
return {
id: 0,
input: '',
tableData: [],
}
},
methods: {
add() {
++this.id
this.tableData.push({ 'shijian': this.input , 'id': this.id })
},
这样我们就实现的添加事件的操作。
现在我们谈谈为什么在把表单元素push进数组的时候,需要在绑定一个id值。这是因为我们在用v-for把数组遍历在li标签上的时候,需要给它提供一个独一无二的key值,且最好不要用索引当key值,具体原因下面再说。
现在我们来实现点击代办事件后,事件完成功能。
我的思路是使用visibility来显示和隐藏一个对勾图案来表示事件是否完成。这里就涉及到了操作dom,所以开始我想给每一个li绑定一个独一无二的ref,但后来我在网上看到可以给每一个li绑定一个同样的ref,然后这样用this.$refs得到的就是一个数组,可以用数组[索引]的方式得到想要的元素,于是我采用了这样的方案。
isok(id) {
this.$nextTick(() => {
var i=this.tableData.findIndex(value=> value.id==id)
console.log(i)
if (this.$refs.trefs[i].style.visibility == 'hidden') {
this.$refs.trefs[i].style.visibility = 'visible'
} else {
this.$refs.trefs[i].style.visibility = 'hidden'
}
console.log(this.tableData)
})
},
本来我是直接把索引号传到函数去,但后来在我做了删除功能后,我发现了一个bug,就是当我删除了一个数组元素后,某些事件代办状态发生了改变。经过检查后发现,原来是删除某个元素后,每个元素的索引值发生了改变,都顺移了一位,这就导致了,我之前通过数组索引查出的数组元素改变了,所以状态也有所改变。这里也解释了为什么不能用索引当key值,因为每个数组元素的索引值是可能改变的,每个索引值并不对应唯一的数组元素。于是我开始传入id值,并且通过findIndex()函数找到这时候元素的索引值,在通过this.$refs修改visibility状态。
删除功能:
删除功能也是很好完成的,一样的用过id找到对应的索引值,然后通过splice函数删除即可。这里我有一个注意点就是,我是把删除功能的点击事件绑定在li标签下面的叉叉图案上,又把事件完成功能绑定在li上面,所以在绑定删除事件的时候还需要给他加stop阻止冒泡,不然每次点击叉叉的时候,它既会触发删除,又会触发点击完成,因为是先删除,所以没有事件给他完成,程序就会报错。
这里这个demo的功能就算是完成了,如果你有更好的实现方式,欢迎评论区讨论。
deletedata(id) {
var i= this.tableData.findIndex(value=> value.id==id)
this.tableData.splice(i, 1)
}
这是最终成果图