vue中实现增删改查

旧城等待， 2022-12-22 06:24 130阅读 0赞

# vue中实现增删改查 #

一个正在努力爱好运动的前端  
座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。

--------------------

### 文章目录 ###

*  vue中实现增删改查
 *  小Demo
 *  添加
 *  删除
 *  修改
 *  查询
 *  全选单选

--------------------

# 小Demo #

<!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8">
    	<title>vue实现表格的增删改查</title>
    	<link rel="stylesheet" href="css/index.css">
    	<script src="js/vue.js"></script>
    	<script src="js/index.js"></script>
    </head>
    
    <body>
    	<div id="table">
    		<div class="add">
    			<input type="text" placeholder="标题" v-model="input.name" />
    			<input type="text" placeholder="发布人" v-model="input.user" />
    			<input type="date" placeholder="发布时间" v-model="input.date" />
    			<button :disabled="!input.name||!input.user||!input.date" @click="addItem()">新增</button>
    		</div>
    		<table cellpadding="0" cellspacing="0">
    			<thead>
    				<tr>
    					<th><input type="checkbox" v-model="checkALL" @change="selectAllItem(v)" />序号</th>
    					<th>标题</th>
    					<th>发布人</th>
    					<th>发布时间</th>
    					<th>操作</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr v-for="(v,i) in items" :key="v.id">
    					<td><input type="checkbox" v-model="v.check" @change="selectItem(v)" />{
       {v.id}}</td>
    					<td>{
       {v.name}}</td>
    					<td>{
       {v.user}}</td>
    					<td>{
       {v.date}}</td>
    					<td>
    						<button :disabled="!v.check" @click="delItem(i)">删除</button>
    						<button @click = "updataShow(v)">编辑</button>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    
    
    		<div id="layer" v-show="flag">
    			<div class="mask">
    				<div class="title">
    					编辑
    					<span @click="flag = false">x</span>
    				</div>
    				<div class="content" > 
    					<input type="text" placeholder="标题" v-model="edit.name"/>
    					<input type="text" placeholder="发布人" v-model="edit.user"/>
    					<input type="date" placeholder="发布时间" v-model="edit.date"/>
    					<button @click="updataItem()" :disabled="!edit.name||!edit.user||!edit.date">更新</button>
    					<button @click="flag = false">取消</button>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    
    </html>

效果展示:

# 添加 #

其中一个为空时禁用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center]  
添加  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 1]

# 删除 #

选中时可删除  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 3]

# 修改 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 4]  
为空时禁止更新  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 7]

# 查询 #

computer:{ 
        searchData(){ 
        //search为空时 retun items全部数据
        if(!search) return this.items;
        //模糊查询
        return this.items.filter(v=>{ 
              return v.name.includes(searchName);
        })
        }
    }

# 全选单选 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 8][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d54bd9d12d704867bb6211fdec7c2b54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/312b8ecf7ba64136b9cda916bf215fa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/405797cd62a24f4bb656f222722110d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/6cc85e3737e9477981949c1226b663c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/0ff8ab366ac3404f882062f5b0eb3b21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/65cc49c3befd4e6b8c24fac412c74a8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/4aeefaaa948645329a229aaf13b01998.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/44372d0e515f470cb7c8351111148933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201120125817263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20201120125804605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/20201120125828571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0,size_16,color_FFFFFF,t_70#pic_center