使用Uniapp设计简单可编辑表格实现增删查改

最新推荐文章于 2024-04-27 13:01:21 发布
最新推荐文章于 2024-04-27 13:01:21 发布
阅读量7.6k 收藏 21
点赞数 4
分类专栏： uniapp 文章标签： uni-app vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TCMandCKX/article/details/127206636
版权

uniapp-简单-表格-增删查改

概述：

uniapp + elementui实现一个可以展示数据列表，
查询：顶部搜索框
增：新增按钮被点击会新增一行空白可编辑行-点击保存将新增数据提交到后台
改：选中数据行，可进入编辑状态，点击保存将数据提交到后台
删除：点击删除直接删除

表格参照使用elementui-table，在此基础上增加可编辑状态
直通车:table

预览效果

总体效果：
在这里插入图片描述

编辑状态下效果：
在这里插入图片描述

前端代码


<template>
	<view class="content">
		
		<view>
			<mSearch  @search="search($event,1)"></mSearch>
		</view>

		<el-table :data="userList" border style="width: 100%" @selection-change="handleSelectionChange" @cell-click="cellClick">
		<el-table-column type="selection" width="55">
		</el-table-column>
		<el-table-column fixed prop="name" label="姓名" width="80">
			<template scope="scope">
				<el-input v-model="scope.row.name" v-show="scope.row.editable" @blur="loseFcous(scope.$index, scope.row)" > </el-input>
				<span style="margin-left: 10px" v-show="!scope.row.editable">{{ scope.row.name }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="account" label="账号" width="120">
			<template scope="scope">
				<el-input v-model="scope.row.account" v-show="scope.row.editable" @blur="loseFcous(scope.$index, scope.row)" > </el-input>
				<span style="margin-left: 10px" v-show="!scope.row.editable">{{ scope.row.account }}</span>
			</template>
		</el-table-column>

		<el-table-column prop="password" label="密码" width="120">
			<template scope="scope">
				<el-input v-model="scope.row.password" v-show="scope.row.editable" @blur="loseFcous(scope.$index, scope.row)" > </el-input>
				<span style="margin-left: 10px" v-show="!scope.row.editable">{{ scope.row.password }}</span>
			</template>
		</el-table-column>
		
		<el-table-column fixed="right" label="操作" width="60">
		  <template slot-scope="scope">
			<el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
		  </template>
		</el-table-column>
		</el-table>

		<el-row>
		  <el-col :span="4"><el-button type="primary" @click="add"><span id="add">新增</span></el-button></div></div></el-col>
		  <el-col :span="4"><div class="grid-content bg-purple" style="visibility: hidden;"></div></div></el-col>
		  <el-col :span="4"><div class="grid-content bg-purple" style="visibility: hidden;"></div></el-col>
		  <el-col :span="4"><div class="grid-content bg-purple" style="visibility: hidden;"></div></el-col>
		  <el-col :span="4"><div class="grid-content bg-purple" style="visibility: hidden;"></div></el-col>
		  <el-col :span="4"><el-button type="success" @click="save">保存</el-button></div></el-col>
		</el-row>
	</view>
</template>

<script>
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';

	function initUser(_this){
		console.table(_this.userinfo);
		uni.request({
			url: "/api/user/",
			data:JSON.stringify(_this.userinfo),
			header: {
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				"Content-Type": "application/json",
			},
			dataType: 'json',
			method:'POST',
			success: (res) => {
				console.table(res);
				if(res.data['code']=='0'){
					_this.userList = res.data.data;
				}else{
					uni.$u.toast('服务器异常，请重新获取');
				}
			},
			error:(res)=>{
				uni.$u.toast('网络异常');
			}
		});
	};
	
	function updateUser(_this,aurl){
		console.table(_this.userinfo);
		uni.request({
			url: aurl,
			data:JSON.stringify(_this.multipleSelection),
			header: {
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				"Content-Type": "application/json",
			},
			dataType: 'json',
			method:'POST',
			success: (res) => {
				if(res.data['code']=='0'){
					console.info(res.data['msg']);
					_this.addOrEdit = false;
				}else{
					console.error('服务器异常，请重新获取');
				}
			},
			error:(res)=>{
				uni.$u.toast('网络异常');
			}
		});
	};
	
	function delUser(_this,uid){
		console.log(typeof uid)
		console.table(_this.userinfo);
		uni.request({
			url: "/api/user/delete",
			data:{"id":uid},
			header: {
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				"Content-Type": "application/json",
			},
			dataType: 'json',
			method:'POST',
			success: (res) => {
				if(res.data['code']=='0'){
					console.info(res.data['msg']);
					_this.addOrEdit = false;
				}else{
					console.error('服务器异常，请重新获取');
				}
			},
			error:(res)=>{
				uni.$u.toast('网络异常');
			}
		});
	};
	
	export default {
		data() {
			return {
				userinfo:{
					"name": '',
					"account": '',
					"password": ''
				},
				userList:[],
				multipleSelection:[],
				ifCheck:true,//是否被选中,默认选中
				checkRows: [],//临时被选中行
				addOrEdit: false,//默认修改保存
				
			}
		},
		components: {
			mSearch
		},
		methods:{
			//搜索方法
			search(e, val) {
				this.userinfo.name=e;
				initUser(this);
			},
			//
			handleClick(row){
				delUser(this,row['id']);
				for(var i=0;i<this.userList.length;i++){
					if(this.userList[i]['id']==row['id']){
						this.userList.splice(i,1);
					}
				}
				
			},
			//用来改变状态
			changeRowState(val,ifCheck){
				for(var i=0,l=val.length;i<l;i++){
					val[i].editable=ifCheck;
				}
			},
			//选框是否被点击触发
		    handleSelectionChange(val) {
				//取消选择-->取消编辑
				if(val.length==0){
					this.changeRowState(this.checkRows,false);
				}else{
					//修改为可编辑状态
					this.changeRowState(val,true);
				}

				this.checkRows = val;
				console.log(this.userList)
				this.multipleSelection = val;
		    },
			//新增
			add(){
				this.addOrEdit = true;
				this.userList.push({});
			},
			//保存
			save(){
				if(this.addOrEdit){
					updateUser(this,"/api/user/insert");
				}else{
					updateUser(this,"/api/user/update");
				}
			},
			//编辑框失去焦点
			loseFcous(index, row) {
				row.editable=false;
			},
			//内容框被点击编辑【该方法不太友好，暂时弃用】
			cellClick(row, column) {
				row.editable=true;
			}
		},
		mounted() {
			var _this = this;
			initUser(_this);
		}
			
	}
</script>

<style lang="scss">
    .content {
        .text {
            font-size: 40upx;
            font-weight: bolder;
            text-align: center;
        }

        .addDataBox {
            width: 750upx;
            background-color: #333;
            color: white;

            .group {
                padding: 15upx;
                border: 1upx solid #eee;
                border-radius: 20upx;
                margin: 0 auto;
                margin: 10upx;

                button {
                    margin-left: 20upx;
                }

                input {
                    width: 170upx;
                    height: 60upx;
                    border: 1upx solid #eee;
                }
            }
        }

    }

    .btn-group {
        margin-top: 20upx;
        display: flex;
    }

    .popupWindow {
        background-color: #eee;
        border: 1upx solid #333;
        position: relative;
        top: 10upx;
    }

    .input {
        width: 170upx;
        height: 60upx;
        border: 1upx solid #333;
    }
</style>
<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>

后台数据为测试数据，一个简单user–>json数据，这里就不放了🛴

Boy陈~
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app table表格
10-26
uni-app 表格示例 no-bad-table
uniapp 表格uniapp 表格，增删改查
04-06
uniapp 表格，增删改查
uniapp 自制表格的基本知识
码农研究僧的博客
03-15 2214
推荐阅读： uni-table 组件资料 java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）
uniapp中使用vuex（表单验证 /生命周期/vx调试注意）
weixin_46391646的博客
08-20 1403
后台管理 后台管理 权限菜单 + 增删改查分页 + e-charts图标 权限菜单不太会 增删改查分页就很简单 有空看一下vue-admin 由后台管理引发得一个思考，如果纯用ele组件库写，开发效率还是很低，如果能二次封装一下ele，写起来会更快，就是二次封装一个表单，表格，还有不同得弹出框，然后表单，表格得内容都可以自定义，传递一个什么type下去，就显示什么。 e-charts图表用的也比较平凡，也可以封装一个。 小程序 vuex (在uniapp中使用) 背景是这样：首页有一个活动
手把手云开发小程序-(四)-uniclould增删改查业务开发
weixin_42349568的博客
11-23 293
不用去纠结uniCloud从哪来的,编译的时候,框架会给我们自己引入的.这里直接这么用就行了,可以暂时把它理解成一个全局的对象.只要这样引入tab云对象,就能调用该云对象的addTabs方法啦.其他的业务开发大同小异,就不多说啦.其他功能可以扫描我文章开头的二维码,体验一下,这个小程序是我自己将一直使用的,这里就当打个小广告吧,也会持续维护迭代.有啥优化意见大家也可以提哈.页面开发就不说了,无非就是html+css,这里主要讲讲如何使用uniclould进行增删改查.这样就完成了增加标签的业务逻辑啦.
springboot增删改查【跨平台开发教程uniapp教程（米饭科技-app小程序h5源码）】
weixin_42317757的博客
05-29 105
首先，请确保您已经集成了Spring Boot和MyBatis框架，并且配置了数据源。接下来，您可以按照以下步骤进行实现springboot增删改查功能
uniapp 表格的介绍和使用
11-17
uniapp 表格
【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】
热门推荐
seeeeeeeeeee的博客
03-02 1万+
由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。H5，小程序兼容表格。移动端表格功能。多端兼容表格功能
uniapp 表格（vue3版本）
qq_52373373的博客
07-24 1037
这是一个vue3版本的表格，支持表格列固定（左、右），插槽，排序等。后续也会继续完善。
uni-app自制表格及其分页
田螺姑娘的博客
10-06 9909
uni-app自制表格及其分页 展示效果： 1.引入插件 t-table表格【点击跳转】 uni-pagination分页器【点击跳转】 2.实例源码 <view style="font-size: 12rpx;margin-top: 25rpx; width: 800rpx; height:auto"> <t-table> <t-tr fontSize="16"> <t-th>序号</t-th> <t-th
uniapp表格
weixin_61662162的博客
07-24 846
在Vue.js中，使用表格来展示数据是一项常见的任务。本文将为大家解析和注释一个Vue.js可滚动表格组件的代码，帮助读者更好地理解和使用该组件。
uni-app配置表单示例修正版
05-11
基于uni-app插件市场中"配置表单"修改，修正原版不能运行的错误，通过传入配置数据动态渲染出表单，目前支持的表单组件有text,number,textarea,radio,checkbox,date,select,html。支持配置必填以及正则校验。提供填写，展示两种状态模式。
基于Uniapp的简易美食分享系统设计与实现源码
04-05
本资源提供了一套基于Uniapp的简易美食分享系统的设计与实现源码，包含410个文件，其中包括242个JavaScript文件，117个Vue组件文件，22个PNG图片文件，12个SCSS样式文件，6个JSON配置文件，4个wxs小程序脚本文件，3个Markdown文档，以及1个HTML页面文件。此外，还包括1个LICENSE许可证文件。该系统主要包含4个tabar，分别是首页（广告模块、优惠券、商品）、分享（分享文章）、订单和我的（个人信息、优惠券、订单情况等），非常适合用于学习和参考Uniapp项目的开发。
UNI-APP 中sqlite demo 增删查改
06-24
本demo包含 自己封装的sqlite.js 页面功能 打开关闭数据库 创建表、删除表 新增表数据、删除表数据 查询表数据、编辑表数据 可按条件操作，删除、查询表数据
uniapp+springboot实现增删改查
04-06
编译器:hbuilder, idea,mysql 数据交互实现方式:uni....主要是用sprinboot进行单表的增删改查,然后通过前端调用增删改查的接口来实现我们想要数据显示以及更新增加和删除的操作 用到的前台运行编译器是微信开发者工具
使用LitePal操作SQLite数据库（增删查改）
01-03
LitePal是一款开源的Android数据库框架，它采用了对象关系映射（ORM）模式，并将我们平时开发常用的一些数据库功能进行封装，使得不用编写一行SQL语句就可以 完成各种建表和增删查改操作。我们使用的编译语言是面向...
【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts（没有 uni_modules）
花间半盘棋
04-26 345
然后按照图片中 README 所写的方式在项目中进行导入；下载的文件是如图所示的路径；就可以正常显示图表啦。
使用uni-app开发app时遇到mqtt.js不可用的问题
Alan_Walker688的博客
04-24 976
使用uni-app开发app时遇到mqtt.js不可用的问题踩坑与记录。
uniapp视频播放器（h5+app）
最新发布
farme_guan的博客
04-27 897
这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。
uniapp增删改查简单实现
04-27
Uniapp 是一个跨平台的应用程序开发框架，可以用于开发微信小程序、App 和 H5 等多种应用程序。如果要实现增删改查，可以使用 uniapp 搭配后端技术实现。下面是一个简单的示例： 1. 创建一个数据库表 首先，需要创建一个数据库表，表名为 `user`，包含以下字段： - `id`：自增长的主键 - `name`：用户姓名 - `age`：用户年龄 - `gender`：用户性别 2. 后端实现 使用 Node.js 和 Express 框架，编写后端接口实现增删改查功能。以下是示例代码： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const mysql = require('mysql'); const app = express(); const port = 3000; // 创建连接池 const pool = mysql.createPool({ host: 'localhost', user: 'root', password: '123456', database: 'test' }); // 解析 application/json app.use(bodyParser.json()); // 查询用户列表 app.get('/api/user', (req, res) => { const sql = 'SELECT * FROM user'; pool.query(sql, (err, result) => { if (err) throw err; res.send(result); }); }); // 查询单个用户 app.get('/api/user/:id', (req, res) => { const id = req.params.id; const sql = 'SELECT * FROM user WHERE id = ?'; pool.query(sql, id, (err, result) => { if (err) throw err; res.send(result[0]); }); }); // 新增用户 app.post('/api/user', (req, res) => { const { name, age, gender } = req.body; const sql = 'INSERT INTO user SET ?'; const user = { name, age, gender }; pool.query(sql, user, (err, result) => { if (err) throw err; res.send('User added successfully'); }); }); // 修改用户 app.put('/api/user/:id', (req, res) => { const id = req.params.id; const { name, age, gender } = req.body; const sql = 'UPDATE user SET name = ?, age = ?, gender = ? WHERE id = ?'; pool.query(sql, [name, age, gender, id], (err, result) => { if (err) throw err; res.send('User updated successfully'); }); }); // 删除用户 app.delete('/api/user/:id', (req, res) => { const id = req.params.id; const sql = 'DELETE FROM user WHERE id = ?'; pool.query(sql, id, (err, result) => { if (err) throw err; res.send('User deleted successfully'); }); }); // 启动服务 app.listen(port, () => { console.log(`Server started at http://localhost:${port}`); }); ``` 3. 前端实现 在 uniapp 中，通过 `uni.request` 方法调用后端接口实现增删改查功能。以下是示例代码： ```javascript export default { data() { return { userList: [] }; }, created() { // 查询用户列表 uni.request({ url: 'http://localhost:3000/api/user', success: res => { this.userList = res.data; } }); }, methods: { // 查询单个用户 getUser(id) { uni.request({ url: `http://localhost:3000/api/user/${id}`, success: res => { console.log(res.data); } }); }, // 新增用户 addUser(user) { uni.request({ url: 'http://localhost:3000/api/user', method: 'POST', data: user, success: res => { console.log(res.data); } }); }, // 修改用户 updateUser(id, user) { uni.request({ url: `http://localhost:3000/api/user/${id}`, method: 'PUT', data: user, success: res => { console.log(res.data); } }); }, // 删除用户 deleteUser(id) { uni.request({ url: `http://localhost:3000/api/user/${id}`, method: 'DELETE', success: res => { console.log(res.data); } }); } } } ``` 以上就是一个简单的 uniapp 增删改查的实现示例。需要注意的是，这只是一个示例，实际开发中需要根据具体业务需求进行适当调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值