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

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('用户点击取消');
						}
					}
				});
			}
		}
	}
}