这是我的项目需求，没有添加和修改页，只能在当前表格做添加和修改，下面是我的实现代码。

- 日理万妓 2023-03-06 05:13 5阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bWRyZWFtZXI_size_16_color_FFFFFF_t_70][]

**html**

// u-mask是uView ui组件中的蒙层组件
    <u-mask :show="show" @click="closeAddScore" class="mask_box">
    			<view class="add_score_box" @tap.stop>
    				<view class="add_top">
    					<view class="add_title">内容</view>
    					<view class="add_score">分数</view>
    					<view class="add_score_btn" @tap="addScore" v-show="isShowAdd"><u-icon name="plus-circle" color="#fff" size="22"></u-icon></view>
    					<view class="add_score_btn" @tap="submitAddScore" v-show="!isShowAdd">
    						<u-icon name="checkbox-mark" color="#fff" size="22"></u-icon>
    					</view>
    				</view>
    				
    				<scroll-view class="add_body" scroll-y>
    					<block v-for="(item, key) in scoreList" :key="key">
    						
    							<view class="add_cont">
    								<view class="add_cont_left">
    									<input type="text" :id="item.id" :value="item.content" :data-score="item.score" :data-name="item.content" @blur="changedContName" @focus="openSubmit(item.id,item.content,item.score)"/>
    								</view>
    								<view class="add_cont_center">
    									<input type="number" :id="item.id" :value="item.score" :data-name="item.content" :data-score="item.score" @blur="changedScoreNum"  @focus="openSubmit(item.id,item.content,item.score)"/>
    								</view>
    								<view class="add_cont_right" :id="item.id" @tap="deleteScoreById"><u-icon name="close" color="#e6e6e6" size="14"></u-icon></view>
    							</view>
    						
    					</block>
    
    					<view class="data_null" v-show="!isData">
    						<image src="../../static/null.png" mode="widthFix"></image>
    						<view>点击右上角的按钮添加数据吧</view>
    					</view>
    				</scroll-view>
    			</view>
    		</u-mask>

**下面是css，我的css是用的less**

// 添加分数
    .add_score_box { 
    	position: relative;
    	width: 415upx;
    	border-radius: 8upx;
    	margin: 60upx auto;
    	background-color: #fff;
    	.add_top { 
    		width: 100%;
    		height: 40upx;
    		border-radius: 8upx 8upx 0 0;
    		background-color: #4888f0;
    		display: flex;
    		padding: 8upx 0;
    		.add_title { 
    			width: 323upx;
    			text-align: center;
    			font-size: 18upx;
    			color: #fff;
    			border-right: 2upx solid #fff;
    			line-height: 26upx;
    		}
    		.add_score { 
    			width: 44upx;
    			font-size: 14upx;
    			color: #fff;
    			text-align: center;
    			line-height: 26upx;
    		}
    		.add_score_btn { 
    			width: 45upx;
    			text-align: center;
    			line-height: 20upx;
    		}
    	}
    	.mask_box { 
    		z-index: 999;
    	}
    	.add_body { 
    		width: 100%;
    		height: 200upx;
    		background-color: #fff;
    		overflow: scroll;
    		border-radius: 0 0 8upx 8upx;
    		.add_cont { 
    			width: 100%;
    			height: 45upx;
    			line-height: 45upx;
    			display: flex;
    			&:nth-last-child(1) { 
    				margin-bottom: 12upx;
    			}
    			.add_cont_left { 
    				width: 323upx;
    				font-size: 16upx;
    				text-align: center;
    				border-bottom: 1upx solid#E8E8E8;
    				border-right: 1upx solid #e8e8e8;
    				input { 
    					height: 45upx;
    					width: 100%;
    				}
    			}
    			.add_cont_center { 
    				width: 44upx;
    				font-size: 16upx;
    				color: #4888f0;
    				text-align: center;
    				border-bottom: 1upx solid #e8e8e8;
    				border-right: 1upx solid #e8e8e8;
    				input { 
    					height: 45upx;
    					width: 100%;
    				}
    			}
    			.add_cont_right { 
    				width: 45upx;
    				text-align: center;
    				line-height: 35upx;
    			}
    		}
    		.data_null { 
    			text-align: center;
    			font-size: 16upx;
    			color: #999;
    			// line-height: 30upx;
    			image { 
    				width: 100upx;
    				margin-top: 16upx;
    			}
    		}
    	}
    	button[form-type='submit'] { 
    		position: absolute;
    		bottom: -38upx;
    		right: 0;
    		width: 100%;
    		height: 40upx;
    		line-height: 40upx;
    		background-color: #4888f0;
    		color: #fff;
    		font-size: 18upx;
    		border-radius: 0 0 8upx 8upx;
    		border: none;
    	}
    }

**js**

export default { 
    	data() { 
    		return { }
    	},
    	methods:{ 
    		
    		// 打开提交按钮
    		openSubmit: function(id, name, score) { 
    			console.log(id, name, score)
    			this.scoreId = id
    			this.contName = name ||	this.contName
    			this.ScoreNum = score ||this.ScoreNum
    			this.isShowAdd = false
    		},
    		// 关闭提交按钮打开添加按钮
    		closeAddScore: function() { 
    			this.show = false
    			this.isShowAdd = true
    			this.getScoreList()
    		},
    		// 添加分数列
    		addScore: function() { 
    			let listItem = { 
    				id: '',
    				name: '',
    				score: ''
    			}
    			this.scoreList.unshift(listItem)
    			this.isData = true;
    			this.isShowAdd = false;
    		},
    		// 标题
    		changedContName: function(e) { 
    			this.contName = e.detail.value
    		},
    		// 分数
    		changedScoreNum: function(e) { 
    			this.ScoreNum = e.detail.value
    		},
    		// 添加题目和分数
    		submitAddScore: function() { 
    			console.log(this.contName, this.ScoreNum)
    			if (this.contName == '') { 
    				this.$refs.uToast.show({ 
    					title: '必填项不能为空！',
    					type: 'error'
    				})
    			} else if (this.ScoreNum == '') { 
    				this.$refs.uToast.show({ 
    					title: '必填项不能为空！',
    					type: 'error'
    				})
    			} else { 
    				request.post('/api/rate/updateItem', { 
    					id: this.scoreId,
    					lessonId: this.id,
    					content: this.contName,
    					score: this.ScoreNum
    				}).then(res => { 
    					// console.log(res)
    					this.isShowAdd = true
    					this.getScoreList()
    				})
    			}
    
    		},
    		// 删除评分
    		deleteScoreById: function(e) { 
    			let id = e.currentTarget.id
    			if (id == '') { 
    				this.getScoreList()
    				this.isShowAdd = true;
    			} else { 
    				let that = this
    				uni.showModal({ 
    					title: '提示',
    					content: '删除后数据不可恢复，是否删除？',
    					success: function(res) { 
    						if (res.confirm) { 
    							request.get('/api/rate/deleteItem', { 
    								id: id
    							}).then(res => { 
    								if (res.success == true) { 
    									that.$refs.uToast.show({ 
    										title: '删除成功！',
    										type: 'success'
    									})
    								} else { 
    									that.$refs.uToast.show({ 
    										title: '删除失败！',
    										type: 'error'
    									})
    								}
    								that.getScoreList()
    							})
    						} else if (res.cancel) { 
    							console.log('用户点击取消');
    						}
    					}
    				});
    			}
    		}
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bWRyZWFtZXI_size_16_color_FFFFFF_t_70]: /images/20230208/320d53f4d7f24b19885793b57ca29d02.png