Vue3 纯前端实现表格内容的添加,修改和删除
Vue纯前端实现表格内容的添加和删除<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test</title><script src="https://unpkg.com/vue@next"></script><st
·
Vue3 纯前端实现表格内容的crud
第三、四天的版本(终极版)
刚刚学习了Vue的基础一部分,所以就先确定好自己想要完成的样子,然后一步步
- 主要解决了之前的一些bug,完善了一些小细节,加了提示,以及输入框的校验,以及不同操作时,禁用无关按钮。
- 这个demo主要用是vue基础指令,以及各种针对数组的方法,还有过滤器而完成,不得不说,过滤器真好用~~
- 遇到的最大问题就是,不同功能,如果不注意细节,就会导致其它问题产生,最好的办法就是不停测试,遇到问题解决问题,有bug尽量解决,不能解决就避开。
图:添加时
修改:
清空内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edit</title>
<style>
*{
font-family: JetBrains Mono;
}
span{
display: inline-block;
width: 90px;
margin: 3px;
}
button{
margin: 4px 8px 4px 1px ;
width: 100px;
}
.spana{
color: skyblue;
}
.tb {
text-align: center;
background-color: #fff;
border: none;
}
</style>
<script src="../../js/vue.js"></script>
<!-- <script src="https://unpkg.com/vue@next"></script>-->
</head>
<body>
<div id="app" @click=clearMsg()>
<h3>人员信息编辑</h3>
<div>
<div style="height: 30px;">
<p style="font-family: JetBrains Mono;color: coral" v-text="msg"></p>
</div>
<div>
<span v-text="'姓名:'"></span><input type="text" v-model="arr.name">
</div>
<div>
<span v-text="'age:'"></span><input type="text" v-model="arr.age">
</div>
<div>
<span v-text="'sex:'"></span><input type="text" v-model="arr.sex">
</div>
<div>
<span v-text="'address:'"></span><input type="text" v-model="arr.address">
</div>
<div style="margin-top: 12px; width: 995px;height: 30px;">
<div style=" height: 30px;display: inline-block">
<button @click="updateAll" v-show="isDisabled==true" :disabled="dataNull()">updateAll</button>
<button @click="saveUpdate" v-show="isDisabled==false">saveUpdate</button>
<button @click="addCancel" :disabled="isUpdate==true|cancels()" >addCancel</button>
<button @click="add()" :disabled="isUpdate">add</button>
<button @click="removeAll()" :disabled="isUpdate">removeAll</button>
</div>
<div style="float: right">
<!--v-model.trim:可以去掉开头和结尾的空格-->
<span v-text="'请输入: '"></span>
<input type="text" v-model.trim="str" placeholder="输入关键字查询:" @keydown="findArr(str)" >
<button @click="findArr(str)" :disabled="isUpdate">Find</button>
</div>
</div>
<table style="text-align: center;min-width: 1000px" border="1px solid black" cellpadding="8" cellspacing="0">
<tr>
<td v-text="'row'"></td>
<td v-text="'name'"></td>
<td v-text="'age'" @dblclick="sortAge()"></td>
<td v-text="'sex'"></td>
<td v-text="'address'"></td>
<td v-text="'edit'"></td>
</tr>
<tr v-for="(value,index) in jsonArray" v-show="showTr">
<td v-text="index+1"></td><!-- 这里只会显示行号,index+1 -->
<td><input :Disabled="isDisabled" v-model="value.name" :class="tb"></td>
<td><input :Disabled="isDisabled" v-model="value.age" :class="tb"></td>
<td><input :Disabled="isDisabled" v-model="value.sex" :class="tb"></td>
<td><input :Disabled="isDisabled" v-model="value.address" :class="tb"></td>
<td><!--id仅仅删除,修改时使用-->
<span><a :class="'spana'" href="#" @click="remove(value.id)">remove</a></span>
</td>
</tr>
<tr v-for="(value,index) in tempArray" v-show="!showTr">
<td v-text="index+1"></td><!-- 这里只会显示行号,index+1,绑定id,删除时用到 -->
<td><input :Disabled="isDisabled" v-model="value.name" :class="tb"></td>
<td><input :Disabled="isDisabled" v-model="value.age" :class="tb"></td>
<td><input :Disabled="isDisabled" v-model="value.sex" :class="tb"></td>
<td><input :Disabled="isDisabled" v-model="value.address" :class="tb"></td>
<td>
<span><a :class="'spana'" href="#" @click="remove(value.id)">remove</a></span>
</td>
</tr>
</table>
<p v-text="'数据空空如也!'" v-show="dataNull()"></p>
</div>
</div>
<script>
var app = {
data(){
return{
isUpdate:false,
tb:'tb', //类名,绑定了表格中的input输入框样式,
msg:'',//消息提示
showTr:true, //控制表格内容的显示
isSort:false,//决定是降序还是升序
str:'',//双向绑定查询输入框
isDisabled: true,//表格中内容是否可以编辑
tempArray:[],//用于显示条件查询出来的内容
jsonArray: [//存储的所有数据
{id:'1',name:'张三',age:'51',sex:'男',address:'北京'},
{id:'2',name:'李四',age:'22',sex:'女',address:'湖南'},
{id:'3',name:'王五',age:'31',sex:'女',address:'上海'},
{id:'4',name:'赵六',age:'25',sex:'男',address:'广州'}
],
arr:{id:'',name:'',age:'',sex:'',address:''}//双向绑定表格
}
},methods:{
clearMsg(){this.msg='';},
remove(rid){
this.clearMsg();
console.log('删除:');
console.log(rid);
let temp = this.jsonArray;
this.jsonArray = temp.filter(temp=>(temp.id!=rid))
this.findArr(this.str);//没次删除都要调用查询方法。参数为空代表查询全部
},
addCancel(){
this.clearMsg();
this.arr={id:'',name:'',age:'',sex:'',address:''};
},
add(){
console.log('------add:');
// 如果名字为空,或者名字包含空格,不允许添加
//如果数组不为空,说明没有输入姓名
if (this.arr.name==''||this.arr.name==undefined){return this.msg='你最起码要输入一个名字吧!'}
let tempStr = this.arr.name;
console.log("tempStr:");
console.log(tempStr);
if (tempStr.indexOf(' ')!=-1){return this.msg='姓名不能包含空格哦~';}
//新添加数组的id刚好是数组的长度+1,视作唯一标识,即使数组长度发生变化,id也不会再变化
this.arr.id = String(this.jsonArray.length+1);
//console.log(this.arr.id)
//这里必须要有,Object.assign()方法,否则输入框输入时会影响表格中的内容!!!重要的话说三遍
//这里必须要有,Object.assign()方法,否则输入框输入时会影响表格中的内容!!!重要的话说三遍
//这里必须要有,Object.assign()方法,否则输入框输入时会影响表格中的内容!!!重要的话说三遍
let assign = Object.assign(this.arr);//复制变量
console.log('assign');
console.log(assign);
let push = this.jsonArray.push(this.arr);//在数组末尾追加输入框输入的元素
console.log('push');
console.log(push);
this.addCancel();//清空输入框
this.findArr(this.str)
console.log(this.jsonArray)
},
cancels(){
var temp = this.arr;
return !(temp.name!=''||temp.age!=''||temp.address!=''||temp.sex!='');//如果输入框中有输入(包括空格),返回false,取消按钮不禁用,否则禁用
},
updateAll(){
this.clearMsg();
this.isUpdate = true;
this.isDisabled = !this.isDisabled;
this.tb='';
},
saveUpdate(){ //保存修改
var temp = this.jsonArray;
let filter = temp.filter(temp=>temp.name.length<1||temp.name.match(/\s/));//把数组中名字长度小于1或者名字中包含空格的的元素过滤出来
console.log(filter.length);
console.log(filter);
if (filter.length>0){return this.msg='名字既不能为空,也不能含有空格~';}
this.isUpdate = false;
this.isDisabled = true; //设置表格中的输入框不可以编辑
this.tb='tb'; // 将表格的输入框样式去掉
this.msg =''; //成功添加后,将之前可能出现的消息提示去掉
},findArr(vars){
this.showTr = false;// 隐藏遍历jsonArray的表格,显示遍历tempArray的表格
console.log('---------this.jsonArray');
console.log(this.jsonArray);
var temp = this.jsonArray;
console.log('---------filter');
let filter = temp.filter(temp=>temp.name.match(vars));//返回过滤后的内容[]
console.log(filter);
this.tempArray=filter;//
},sortAge(){ //年龄排序
this.findArr(this.str);// 查询所有
let sort = [];
this.isSort = !this.isSort; //设置一个标识,如果为true,则倒序排序,否则正序
if (this.isSort){
sort = this.tempArray.sort((a, b)=>a['age']-b['age']);
}else{
sort = this.tempArray.sort((a, b)=>b['age']-a['age']);
}
this.tempArray = sort;
},removeAll(){
this.clearMsg();
var t = '确认删除所有数据?';
if (!confirm(t)){
return false;
}
// 注意;这两个数组的类型不一样,设为空的符号不一样,
// 如果设置的符号不同,会将data域里的数组类型改变,导致数组添加元素报错。
//this.jsonArray = [];
//this.tempArray={};
//上面的方法将会影响添加时对空格的验证
this.jsonArray.splice(0,this.jsonArray.length);//清空数组
this.tempArray.splice(0,this.tempArray.length);
},dataNull(){// 判断当前数组是否为空
return this.jsonArray.length==0;
}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
第二天下午的版本:crud,双击age列排序
-
存在一个bug,用于数据都是存放在data域里,所以使用条件查询以后,再进行编辑操作,会导致数据混乱。俗话说解决不了bug就解决提出bug的人,没有bug万事大吉,由于是自己发现的,所以就只有解决产生bug的按钮了。
-
哎,写前端真难~~
-
效果图1.非条件查询页面
-
效果图2.条件查询页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
*{
font-family: JetBrains Mono;
}
span{
display: inline-block;
width: 90px;
margin: 3px;
}
button{
margin: 4px 8px 4px 1px ;
width: 100px;
}
.spana{
color: skyblue;
}
.tb input{
text-align: center;
background-color: #fff;
border: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<div>
<span v-text="'name:'"></span><input type="text" v-model="arr.name">
</div>
<div>
<span v-text="'age:'"></span><input type="text" v-model="arr.age">
</div>
<div>
<span v-text="'sex:'"></span><input type="text" v-model="arr.sex">
</div>
<div>
<span v-text="'address:'"></span><input type="text" v-model="arr.address">
</div>
<div style="margin-top: 12px; width: 995px;height: 30px;">
<div v-show="str==''" style=" height: 30px;display: inline-block">
<button @click="updateAll" v-show="isDisabled==true">updateAll</button>
<button @click="saveUpdate" v-show="isDisabled==false">saveUpdate</button>
<button @click="add">add</button>
<button @click="removeAll()">removeAll</button>
</div>
<div style="float: right">
<!--v-model.trim:可以去掉开头和结尾的空格-->
<span v-text="'请输入: '"></span><input type="text" v-model="str" placeholder="输入关键字查询:" @keydown="findArr(str)" > <button @click="findArr(str)">Find</button>
</div>
</div>
<table style="text-align: center;min-width: 1000px" border="1px solid black" cellpadding="8" cellspacing="0" :class="'tb'">
<tr>
<td v-text="'row'"></td>
<td v-text="'name'"></td>
<td v-text="'age'" @dblclick="sortAge()"></td>
<td v-text="'sex'"></td>
<td v-text="'address'"></td>
<td v-text="'edit'" v-show="str==''"></td>
</tr>
<tr v-for="(value,index) in jsonArray" v-show="showTr">
<td v-text="index+1"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.name" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.age" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.sex" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.address" :class="'tb'"></td>
<td>
<span><a :class="'spana'" href="#" @click="remove(index)">remove</a></span>
</td>
</tr>
<tr v-for="(value,index) in tempArray" v-show="!showTr">
<td v-text="index+1"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.name" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.age" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.sex" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.address" :class="'tb'"></td>
<td v-show="str==''">
<span><a :class="'spana'" href="#" @click="remove(index)">remove</a></span>
</td>
</tr>
</table>
</div>
</div>
<script>
var app = {
data(){
return{
showTr:true,
isSort:false,
str:'',
isDisabled: true,//表格中内容是否可以编辑
tempArray:[],//用于显示查询出来的内容
jsonArray: [//存储的所有数据
{name:'张三',age:'51',sex:'男',address:'北京'},
{name:'李四',age:'22',sex:'女',address:'湖南'},
{name:'王五',age:'31',sex:'女',address:'上海'},
{name:'赵六',age:'25',sex:'男',address:'广州'}
],
arr:{name:'',age:'',sex:'',address:''}
}
},methods:{
remove(index){
this.jsonArray.splice(index,1);// index:是开始位置,1是删除的个数
},
add(){
//这里必须要有,Object.assign()方法,否则输入框输入时会影响表格中的内容
Object.assign(this.arr);//复制变量
this.jsonArray.push(this.arr);
this.arr = {name:'',age:'',sex:'',address:''}
console.log(this.jsonArray)
},
updateAll(){
this.isDisabled = !this.isDisabled;
},
saveUpdate(){ //保存修改
this.isDisabled = true;
},findArr(vars){
this.showTr = false;
var temp = this.jsonArray;
//if (temp==['']){return;}
let filter = temp.filter(temp=>temp.name.match(vars));//返回过滤后的内容[]
console.log(filter);
this.tempArray=filter;//
},sortAge(){ //年龄排序
let sort = [];
this.isSort = !this.isSort; //设置一个标识,如果为true,则倒序排序,否则正序
if (this.isSort){
sort = this.jsonArray.sort((a, b)=>a['age']-b['age']);
}else{
sort = this.jsonArray.sort((a, b)=>b['age']-a['age']);
}
this.jsonArray = sort;
},removeAll(){
this.jsonArray = [];
}
}
}
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
第二天的版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
*{
font-family: JetBrains Mono;
}
span{
display: inline-block;
width: 90px;
margin: 3px;
}
button{
margin: 4px 8px 4px 1px ;
width: 100px;
}
.spana{
color: skyblue;
}
.tb input{
text-align: center;
background-color: #fff;
border: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<div>
<span v-text="'name:'"></span><input type="text" v-model="arr.name">
</div>
<div>
<span v-text="'age:'"></span><input type="text" v-model="arr.age">
</div>
<div>
<span v-text="'sex:'"></span><input type="text" v-model="arr.sex">
</div>
<div>
<span v-text="'address:'"></span><input type="text" v-model="arr.address">
</div>
<div>
<button @click="updateAll" v-show="isDisabled==true">updateAll</button>
<button @click="saveUpdate" v-show="isDisabled==false">saveUpdate</button>
<button @click="add">add</button>
</div>
<table style="text-align: center" border="1px solid black" cellpadding="8" cellspacing="0" :class="'tb'">
<tr>
<td v-text="'index'"></td>
<td v-text="'name'"></td>
<td v-text="'age'"></td>
<td v-text="'sex'"></td>
<td v-text="'address'"></td>
<td v-text="'edit'"></td>
</tr>
<tr v-for="(value,index) in jsonArray" >
<td><input disabled v-model="index" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.name" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.age" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.sex" :class="'tb'"></td>
<td><input :Disabled="isDisabled" v-bind:name="'input'" v-model="value.address" :class="'tb'"></td>
<td>
<span><a :class="'spana'" href="#" @click="remove(index)">remove</a></span>
</td>
</tr>
</table>
</div>
</div>
<script>
var app = {
data(){
return{
isDisabled: true,
jsonArray: [
{name:'张三',age:'51',sex:'男',address:'北京'},
{name:'李四',age:'22',sex:'女',address:'湖南'},
{name:'王五',age:'31',sex:'女',address:'上海'},
{name:'赵六',age:'25',sex:'男',address:'广州'}
],
arr:{name:'',age:'',sex:'',address:''}
}
},methods:{
remove(index){
this.jsonArray.splice(index,1);
},
add(){
//这里必须要有,不然最上面的文本框一旦输入,会影响添加后的内容
Object.assign(this.arr);//复制变量
this.jsonArray.push(this.arr);
// 千万注意
this.arr = {name:'',age:'',sex:'',address:''}
console.log(this.jsonArray)
},
updateAll(){
this.isDisabled = !this.isDisabled;
},
saveUpdate(){
this.isDisabled = true;
},update(index){
let elementsByNameElement = document.getElementsByName('input')[index];
console.log(elementsByNameElement)
}
}
}
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
第一天的版本:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
span{
display: inline-block;
width: 90px;
margin: 3px;
}
</style>
</head>
<body>
<div id="app">
<div>
<div>
<span v-text="'name:'"></span><input type="text" v-model="arr.name">
</div>
<div>
<span v-text="'age:'"></span><input type="text" v-model="arr.age">
</div>
<div>
<span v-text="'sex:'"></span><input type="text" v-model="arr.sex">
</div>
<div>
<span v-text="'address:'"></span><input type="text" v-model="arr.address">
<button @click="add">add</button>
</div>
<table border="1px solid black" cellpadding="10" cellspacing="0">
<tr>
<td v-text="'index'"></td>
<td v-text="'name'"></td>
<td v-text="'age'"></td>
<td v-text="'sex'"></td>
<td v-text="'address'"></td>
<td v-text="'edit'"></td>
</tr>
<tr v-for="(value,index) in jsonArray">
<td v-text="index+1"></td>
<td v-text="value.name"></td>
<td v-text="value.age"></td>
<td v-text="value.sex"></td>
<td v-text="value.address"></td>
<td>
<a href="#" @click="remove(index)">remove</a>
</td>
</tr>
</table>
</div>
</div>
<script>
var app = {
data(){
return{
jsonArray: [
{name:'张三',age:'51',sex:'男',address:'北京'},
{name:'李四',age:'22',sex:'女',address:'湖南'},
{name:'王五',age:'31',sex:'女',address:'上海'},
{name:'赵六',age:'25',sex:'男',address:'广州'}
],
arr:{name:'',age:'',sex:'',address:''}
}
},methods:{
remove(index){
this.jsonArray.splice(index,1);
},
add(){
var arrays= [];
Object.assign(arrays,this.arr);//复制变量
this.jsonArray.push(arrays);
// 千万注意
//this.arr = '';
//会将arr变为字符串类型,导致输入框无法赋值
this.arr = [];
}
}
}
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
由于是纯css,所以页面比较简陋,第一天的版本不太完整,不能修改,不知道有没有bug
第二天的还行,增删改查都能实现,多加了CSS,还设置了我喜欢的IDEA专用字体
昨天搞到Vue devtool搞了好几个小时,最后打包老出错,所幸还是弄好了
我是用的win10VPN,去谷歌市场安装的插件。
VPN:微软商城搜索AnyVPN,可以免费使用五分钟
Vue插件安装地址:https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
更多推荐
已为社区贡献3条内容
所有评论(0)