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
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
