学习笔记---uniapp 增删改查

代码： 

<template>
	<view>
		<!-- 手动添加窗口 -->
		<view class="add" style="margin: 20upx;">
			<view class="name">
				<uni-easyinput v-model="editlist.name" prefixIcon="person" placeholder="请输入用户名"></uni-easyinput>
			</view>
			<view class="address">
				<uni-easyinput v-model="editlist.address" prefixIcon="map-pin-ellipse" placeholder="请输入地址">
				</uni-easyinput>
			</view>
			<view class="date">
				<uni-datetime-picker v-model="editlist.date" type="date" :clear-icon="false" />
			</view>
			<!-- <button type="primary" size="mini" style="margin-top: 15upx;" @click="add()">确定</button> -->
			<button type="primary" size="mini" style="margin-top: 15upx;" @click="determine()">添加</button>
		</view>
		<!-- xiamian ddedongxi -->
		<view class="uni-container">
			<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th width="50" align="center">序号</uni-th>
					<uni-th width="150" align="center">日期</uni-th>
					<uni-th width="150" align="center">姓名</uni-th>
					<uni-th align="center">地址</uni-th>
					<uni-th width="204" align="center">设置</uni-th>
				</uni-tr>
				<!-- 遍历这个list把数据呈现在页面上 -->
				<uni-tr v-for="(item, index) of myList">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td>{{ item.date }}</uni-td>
					<uni-td>
						<view class="name">{{ item.name }}</view>
					</uni-td>
					<uni-td align="center">{{ item.address }}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="edit(item,index)">修改</button>
							<button class="uni-button" size="mini" type="warn" @click="del(index)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchVal: '',
				// 每页数据量
				pageSize: 5,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,

				// 确定按钮时的判断
				keyword: 0,
				// 使用修改按钮时对应的行数
				selected: 0,
				// 临时用的数据存储
				editlist: {
					name: '',
					address: '',
					email: '',
				},
				//初始数据
				list: [{
					date: "2020-09-01",
					name: "Dcloud1",
					address: "上海市普陀区金沙江路 1518 弄"
				}, {
					date: "2020-09-06",
					name: "Dcloud6",
					address: "上海市普陀区金沙江路 1517 弄"
				}, {
					date: "2020-09-07",
					name: "Dcloud7",
					address: "上海市普陀区金沙江路 1519 弄"
				}, {
					date: "2020-09-01",
					name: "Dcloud17",
					address: "上海市普陀区金沙江路 1518 弄"
				}, {
					date: "2020-09-02",
					name: "Dcloud18",
					address: "上海市普陀区金沙江路 1517 弄"
				}],
				// 展示用的数据
				myList: []
			}
		},

		onLoad() {
			this.selectedIndexs = []
			this.getData(1)
		},

		// created使页面最开始呈现的就是list里的初始数据。
		created() {
			this.myList = this.list
		},
		methods: {
			// 修改按钮
			edit(item, index) {
				this.editlist.name = item.username;
				this.editlist.address = item.address;
				this.editlist.email = item.email;
				// 判断是添加还是修改 0是添加 1是修改
				this.keyword = 1;
				this.selected = index;
			},
			// 删除按钮
			del(index) {
				this.list.splice(index, 1);
			},
			// 编辑框的确定按钮；
			determine() {
				// 判断是添加还是修改 0是添加 1是修改
				this.myList = this.list;
				if (this.keyword === 0) {
					this.myList.push(this.editlist);
				} else {
					// this.mylist指要更改的数据;this.selected指改变的行数;this.editlist指用于赋值的数据
					this.$set(this.myList, this.selected, this.editlist);
				}
				//顺延下去编辑框可以自动更新新数据，数据框置空。
				this.editlist = {}
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},

		}

	}
</script>

效果图： 

 参考链接：保姆级教学，让你用VUE来轻松实现简单的增删改查操作，不来看看吗_做只努力的小咸鱼的博客-CSDN博客_vue增删改查

uni-app官网 (dcloud.net.cn)