功能展示区
添加数据
单项删除
多选删除
全选删除
清空数据列表
修改指定数据+界面的显示隐藏（点击修改按钮，界面才显示出来，数据更改完成后，页面隐藏）
完整代码：
<template>
<view class="content">
<view class="text">添加用户</view>
<view class="addDataBox">
<view class="group" v-if="showUI">
<text>姓名:</text>
<input type="text" v-model="user.name" placeholder="请输入姓名" />
</view>
<view class="group" v-if="showUI">
<text>性别:</text>
<input type="text" v-model="user.gender" placeholder="请输入性别" />
</view>
<view class="group" v-if="showUI">
<text>年龄:</text>
<input type="text" v-model="user.age" placeholder="请输入年龄" />
</view>
<button type="primary" @tap="addDate">添加数据</button>
</view>
<!--表单插件： https://ext.dcloud.net.cn/plugin?id=413 -->
<view class="userList">
<view class="warp">
<view class="box">
<view class="title text">数据列表</view>
<t-table border="2" border-color="#95b99e" :is-check="true" @change="change">
<t-tr font-size="16" color="#95b99e" align="left">
<t-th align="center">姓名</t-th>
<t-th align="center">性别</t-th>
<t-th align="center">年龄</t-th>
<t-th align="center">操作</t-th>
<t-th align="center">操作</t-th>
</t-tr>
<t-tr font-size="14" color="#5d6f61" align="right" v-for="item in tableList" :key="item.id">
<t-td align="center">{{ item.name }}</t-td>
<t-td align="center">{{ item.gender }}</t-td>
<t-td align="center">{{ item.age }}</t-td>
<t-td align="center">
<button style="height: 50upx;line-height: 50upx;" size="mini" type="warn" @tap="delOne(item)">删</button>
</t-td>
<t-td align="center">
<button style="height: 50upx;line-height: 50upx;" size="mini" type="primary" @tap="update(item)">改</button>
</t-td>
</t-tr>
</t-table>
</view>
</view>
</view>
<view class="btn-group">
<button type="warn" @tap="allDel">清空数据</button>
<button type="warn" @tap="selectDel">批量删除</button>
</view>
<!-- 修改数据的弹窗 -->
<view v-if="show" class="popupWindow">
<text>姓名:</text>
<input class="input" type="text" v-model="Update.name" placeholder="请输入姓名" />
<text>性别:</text>
<input class="input" type="text" v-model="Update.gender" placeholder="请输入性别" />
<text>年龄:</text>
<input class="input" type="text" v-model="Update.age" placeholder="请输入年龄" />
<button type="primary" @tap="confirm">确认</button>
</view>
</view>
</template>
<script>
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
export default {
data() {
return {
user: {
name: '',
gender: '',
age: '',
},
Update: {
name: '',
gender: '',
age: '',
},
item: {},
showUI: true,
show: false,
selectArr: [],
allSelectLength: '',
tableList: [{
id: 0,
name: '张三',
gender: '男',
age: '19'
},
{
id: 1,
name: '李四',
gender: '男',
age: '29'
}
]
}
},
components: {
tTable,
tTh,
tTr,
tTd
},
methods: {
addDate() {
//添加数据
console.log(this.user)
if (this.user) {
//this.showUI = true
this.tableList.push(this.user);
this.user = {}; //恢复初始化，显示请输入字样
}
},
allDel() {
//一键清空所有数据
this.tableList = []
},
delOne(item) {
//删除单项
this.tableList.splice(item, 1)
},
update(item) {
this.show = true
this.item = item //拿到要更新数据的行
this.showUI = false
},
confirm() {
this.item.name = this.Update.name //更新名字
this.item.gender = this.Update.gender //更新性别
this.item.age = this.Update.age //更新年龄
this.show = false
this.Update = {} //恢复输入状态
this.showUI = true
},
change(e) {
//获取选中状态
//console.log(e.detail);
this.selectArr = e.detail //
},
selectDel() {
//实现批量删除功能
//1.全选删除
// if(this.tableList.length == this.allSelectLength) {//这也可以全选删除，不过只能使用一次
// this.tableList = []
// }
//实现全选删除和多选删除
let arr = [];
let len = this.tableList.length;
for (let i = 0; i < len; i++) {
if (this.selectArr.indexOf(i) >= 0) {
// console.log(this.selectArr.indexOf(i))
this.selectArr.indexOf(i);
} else {
arr.push(this.tableList[i]);
}
}
this.tableList = arr; //重新渲染数据
this.selectArr = [];
}
}
}
</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>
注：本次使用了uni-app插件市场提供table插件：https://ext.dcloud.net.cn/plugin?id=413
网友评论