vue 如何做好表格处理？

最新推荐文章于 2024-07-09 21:18:14 发布

LJHFI

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量117

点赞数

文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/ljhfi/article/details/130631195

版权

首先做之前先得知道一些关于vue的语法吧？

v-model:表单值和数据的双向绑定

v-for: 渲染。语法：v-for=“（item,index）in list”

@click 绑定事件点击事件

.prevent :阻止事件默认跳转

删除：数组名.splice(index,删除个数)

上代码！

上代码！！

上代码！！！

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8" />

<title></title>

<style>

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

color: #721c24;

}

h1 {

text-align: center;

color: #333;

margin: 20px 0;

}

table {

margin: 0 auto;

width: 800px;

border-collapse: collapse;

color: #004085;

}

th {

padding: 10px;

background: #cfe5ff;

font-size: 20px;

font-weight: 400;

}

td,

th {

border: 1px solid #b8daff;

}

td {

padding: 10px;

color: #666;

text-align: center;

font-size: 16px;

}

tbody tr {

background: #fff;

}

tbody tr:hover {

background: #e1ecf8;

}

.info {

width: 900px;

margin: 50px auto;

text-align: center;

}

.info input {

width: 80px;

height: 25px;

outline: none;

border-radius: 5px;

border: 1px solid #b8daff;

padding-left: 5px;

}

.info button {

width: 60px;

height: 25px;

background-color: #004085;

outline: none;

border: 0;

color: #fff;

cursor: pointer;

border-radius: 5px;

}

.info .age {

width: 50px;

}

</style>

</head>

<body>

<div id="app">

<h1>表格（</h1>

<form action="">



<div class="info">

姓名：<input type="text" class="uname" v-model="formData.name" />

年龄：<input type="text" class="age" v-model="formData.age"/>

性别:

<select name="gender" id="" class="gender" v-model="formData.sex">

<option value="男">男</option>

<option value="女">女</option>

</select>

薪资：<input type="text" class="salary" v-model="formData.salary"/>

就业城市：<select name="city" id="" class="city" v-model="formData.city"

>

<option value="北京">北京</option>

<option value="上海">上海</option>

<option value="广州">广州</option>

<option value="深圳">深圳</option>

<option value="曹县">曹县</option>

</select>



<button class="add" @click.prevent="doAdd">录入</button>

</div>

</form>

<h1>就业榜</h1>

<table>

<thead>

<tr>

<th>学号</th>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

<th>薪资</th>

<th>就业城市</th>

<th>操作</th>

</tr>

</thead>

<tbody>



<tr v-for="(item,index) in list">

<td>{{index+1}}</td>

<td>{{item.name}}</td>

<td>{{item.age}}</td>

<td>{{item.sex}}</td>

<td>{{item.salary}}</td>

<td>{{item.city}}</td>

<td>



<a href="javascript:" class="delete" @click="list.splice(index,1)">删除</a>

</td>

</tr>

</tbody>

</table>

</div>

<script src="./vue.js"></script>

<script>

/*

vue核心思路：数据驱动

（1）思考案例需要哪些数据

表单：v-model 是设置+获取表单值的

列表（ul、table等）:v-for数组 v-for渲染数组的

（3）vue页面的增删改查：数组的增删改查

表格思路：

1.使用v-model绑定表单数据

2.点击录入：把表单数据添加到数组 v-for

(1)表单按钮需要阻止默认跳转：@click.prvent='doAdd'

(2)给数组添加元素

（3）表单数据清空

3.数组增删改查处理

删除元素：arr.solice(下标，数量)

*/

const app = new Vue({

// 挂载点

el:'#app',

//1.表单数据

data:{

formData:{

name:'',

age:'',

sex:'男',

salary:'',

city:'深圳'

},

// 2.列表

list:[]

},

// 事件方法

methods:{

// 录入

doAdd(){

// (1)表单数据添加到数组

this.list.push(this.formData)

// (2)清空表单数据

this.formData={

name:'',

age:'',

sex:'男',

salary:'',

city:'深圳'

}

}

}

})

</script>

</body>

</html>