vue实现li列表的新增删除和修改

哈喽，我又来更新啦，依旧还是业务场景的实现

通过新增、删除、修改按钮实现li列表的改变

新增：点击新增按钮，进行新增

编辑：点击列表某一项，然后点击编辑按钮进行修改

删除：点击列表某一项，然后点击删除按钮进行删除

代码如下

 <div class="con-icon">         
     <i class="el-icon-circle-plus-outline" @click="addClick"></i>         
     <i class="el-icon-edit-outline" @click="editClick"></i>         
     <i class="el-icon-delete" @click="delClick"></i>        
</div>       
<div class="con-list">         
     <ul class="con-list">            
        <li class="list-li" v-for="(todo,i) in todos" :key="i" @click="selected(i)">{{todo}}</li>          
    </ul>        
</div>

通过for循环遍历todos的内容来渲染li列表

data内容：

listID: '',      
input_todo: '',      
new_todo: '',      
todos: ['猫眼三姐妹', '城市猎人', '头文字D'],      
centerDialogAdd: false,      
centerDialogEdit: false,      
centerDialogDel: false,

新增

addClick () {      
    this.centerDialogAdd = true    },    
add () {      
    this.todos.push(this.input_todo)      
    this.input_todo = ''      
    this.centerDialogAdd = false    
},

新增弹窗：

<el-dialog title="新增" :visible.sync="centerDialogAdd" width="30%">      
    <el-input v-model="input_todo" placeholder="请输入内容"></el-input>      
        <span slot="footer" class="dialog-footer">        
        <el-button @click="centerDialogAdd = false">取 消</el-button>        
        <el-button type="primary" @click="add">确 定</el-button>      
    </span>    
</el-dialog>

通过this.centerDialogAdd的状态来控制dialog的打开关闭

通过push方法把新增的li内容添加到this.input_todo进行存储

之后 把this.input_todo进行置空，为下次执行添加进行准备

编辑：

 editClick () {      
    this.centerDialogEdit = true      
    const i = this.listID      
    this.new_todo = this.todos[parseInt(i)]    
}, 
edit () {      
    const i = this.listID      
    this.todos[parseInt(i)] = this.new_todo      
    this.new_todo = ''      
    this.centerDialogEdit = false 
},

编辑弹窗：

<el-dialog title="编辑" :visible.sync="centerDialogEdit" width="30%">      
    <el-input v-model="new_todo" placeholder="请输入内容"></el-input>      
        <span slot="footer" class="dialog-footer">        
        <el-button @click="centerDialogEdit = false">取 消</el-button>        
        <el-button type="primary" @click="edit">确 定</el-button>      
    </span>    
</el-dialog>

基本操作上面的新增逻辑一样

selected (i) {      
    this.listID = i    
},

通过seleted（）获取到当前列的key值通过
this.new_todo = this.todos[parseInt(i)]
把列表原来的值进行回显再次通过
this.todos[parseInt(i)] = this.new_todo
对选中的列表内容进行修改
在这里插入图片描述

删除：

代码如下：

delClick () {      
    this.centerDialogDel = true    
},    
del () {      
    const i = this.listID      
    this.todos.splice(i, 1)      
    this.centerDialogDel = false    
},

删除弹窗：

<el-dialog title="删除" :visible.sync="centerDialogDel" width="30%">      
    <span>确认删除该分类吗？</span>      
        <span slot="footer" class="dialog-footer">        
        <el-button @click="centerDialogDel = false">取 消</el-button>        
        <el-button type="primary" @click="del">确 定</el-button>      
    </span>    
</el-dialog>

通过点击列表获取当前列的key值执行 **this.todos.splice(i, 1)**对选中列的数据进行删除

以上就是一个业务场景的实现，希望可以帮助到大家！！！