上代码

<template>
	<view class="">
		<!-- 搜索 -->
		<view class="" style="margin:10rpx;">
			<u-row gutter="16">
				<u-col span="9">
					<u-input @input="inpus" v-model="inputvalue" :type="type" :border=true />
				</u-col>
				<u-col span="3">
					<u-button type="error" @click="search">搜索</u-button>
				</u-col>
			</u-row>
		</view>
		<view class="">
			<u-table>
				<u-tr>
					<u-th>名字</u-th>
					<u-th>绰号</u-th>
					<u-th>绝招</u-th>
					<u-th>操作</u-th>
				</u-tr>
				<u-tr v-for="item of listform" :key="item.id">
					<u-td>{{item.user}}</u-td>
					<u-td>{{item.nick}}</u-td>
					<u-td>{{item.skills}}</u-td>
					<u-td class="dis">
						<text style="color: #007AFF;margin-right: 20rpx;" @click="edit(item.id)">修改</text>
						<text style="color: #DD524D;" @click="delet(item.id)">删除</text>
					</u-td>
				</u-tr>
				<u-tr>
					<u-td>
						<u-input v-model="username" :type="type" />
					</u-td>
					<u-td>
						<u-input v-model="nickname" :type="type" />
					</u-td>
					<u-td>
						<u-input v-model="skill" :type="type" />
					</u-td>
					<u-td>
						<u-button type="primary" @click="add">新增</u-button>
					</u-td>
				</u-tr>
			</u-table>
		</view>
		<view class="">
			<u-modal v-model="isshow" :mask-close-able="true" @confirm="queding" title="编辑">
				<u-row gutter="16" style="margin-left:20%;">
					<u-col span="4">名字</u-col>
					<u-col span="6">
						<u-input v-model="upname" :type="type" />
					</u-col>
				</u-row>
				<u-row gutter="16" style="margin-left:20%;">
					<u-col span="4">绰号</u-col>
					<u-col span="6">
						<u-input v-model="upnick" :type="type" />
					</u-col>
				</u-row>
				<u-row gutter="16" style="margin-left:20%;">
					<u-col span="4">绝招</u-col>
					<u-col span="6">
						<u-input v-model="upskill" :type="type" />
					</u-col>
				</u-row>
			</u-modal>
		</view>
		<!-- 关闭数据库 -->
		<u-button type="error" @click="close">关闭数据库</u-button>
	</view>
</template>

<script>
		data() {
			return {
				// 搜索
				inputvalue:'',
				// 表格
				username: '',
				nickname:'',
				skill:'',
				type: 'text',
				listform:[],
				ID:0,
				// 弹框编辑
				isshow:false,
				upname:'',
				upnick:'',
				upskill:'',
			}
		},
		onLoad() {
			// 打开数据库
			this.opendata()
			// 查询所有
			this.selectSQL()
		},
		methods: {
			// 打开数据库
			opendata(){
				plus.sqlite.openDatabase({
					// 表名
					name: 'xin_test',
					// 表地址
					path: '_doc/test.db',
					success: function(e) {
						// e是一个对象
						console.log("数据库开启成功" + 'openDatabase success!');
						resolve(e)
						
					},
					fail: function(e) {
						console.log("数据库开启失败" + 'openDatabase failed: ' + JSON.stringify(e));
					}
				});
			},
			// 关闭数据库
			close(){
				plus.sqlite.closeDatabase({
					name: 'xin_test',
					success(e) {
						console.log("关闭数据库成功");
						console.log(e)
					},
					fail(e) {
						console.log("关闭数据库失败" + JSON.stringify(e));
					}
				})
			},
			// 先创建表然后新增
			add(obj){
				var _self=this;
				plus.sqlite.executeSql({
					name: 'xin_test',
					sql:'create table if not exists dataitem("id" INTEGER PRIMARY KEY AUTOINCREMENT,"user" TEXT,"nick" TEXT,"skills" TEXT)',
					success(e){
						// 获取对应的值
						var nameone=_self.username
						var nicknamea= _self.nickname
						var skilla = _self.skill
						// 新增
						plus.sqlite.executeSql({
						    // 表名
							name: 'xin_test',
							// 新增语句
							sql: 'insert into dataitem(user,nick,skills) values("'+nameone+'","'+nicknamea+'","'+skilla+'")',
							success(e){
								console.log("新增成功",e)
								_self.username=null
								_self.nickname=null
								_self.skill=null
								_self.selectSQL()
							},
							fail: function(e) {
								console.log("新增失败");
							}
						})
					}
				})
			},
			// 搜索
			search(){
				var _self=this
				// 获取输入框的值
				var nameuser =_self.inputvalue
				// AND 与， OR 或, NOT 非
				plus.sqlite.selectSql({
					name:'xin_test',
					// 查询语句
					sql:'select * from dataitem where user="'+nameuser+'" or nick="'+nameuser+'" or skills="'+nameuser+'"',
					success: function(data){
						// 赋值
						_self.listform=data
					}
				})
			},
			// 清空显示所有数据
			inpus(){
				if(this.inputvalue==''){
					// 查询所有数据
					this.selectSQL()
				}
			},
			// 编辑
			edit(arr){
				var _self=this;
				_self.ID=arr
				// 循环所有数据
				this.listform.forEach(item=>{
				// 判断条件id是否相等
					if(_self.ID==item.id){
						_self.upname=item.user
						_self.upnick=item.nick
						_self.upskill=item.skills
					}
				})
				this.isshow=true
			},
			queding(ID){
				var _self=this
				console.log(9,_self.ID)
				var namevalue = _self.upname
				var nickvalue = _self.upnick
				var skillvalue = _self.upskill
				plus.sqlite.executeSql({
					name:'xin_test',
					// 修改语句
					sql:'update dataitem set user="'+namevalue+'",nick="'+nickvalue+'",skills="'+skillvalue+'"',
					success(data){
						// 循环所有数据
						_self.listform.forEach(item=>{
							// 判断条件id是否相等
							if(_self.ID==item.id){
								item.user=_self.upname
								item.nick=_self.upnick
								item.skills=_self.upskill
							}
						})
					}
				})
			},
			// 删除
			delet(ob){
				var _self=this
				var obj = parseInt(ob)
				console.log(obj)
				uni.showModal({
				    title: '删除',
				    content: '是否要删除这一条数据',
					success(res){
						if(res.confirm){
							plus.sqlite.executeSql({
								name:'xin_test',
								// 删除语句
								sql:'delete from dataitem where id="'+obj+'"',
								success(data){
									// 查询有没这个id
									var indexs= _self.listform.findIndex( item=>{
										if(item.id == obj){
											return true
										}
									})
									// 删除
									_self.listform.splice(indexs,1)
									console.log("删除成功")
								},
								fail(){
									console.log("删除失败")
								}
							})
						}
					}
				})
			},
			// 数据库查询
			selectSQL(){
				var _self=this
				plus.sqlite.selectSql({
					name: 'xin_test',
					// 查询所有语句
					sql: 'select * from dataitem',
					success(data){
						_self.listform=data
						console.log("查询",data)
					},
					fail(e){
						console.log("查询失败")
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dis{
		display: inline-block;
	}
</style>