Vue表格增删改查的知识点-未完待续
创建一个组件App_form.vue
学习框架的最后方式还是多看开发文档
<template>
<div class="form-border">
<div class="form-header">
<el-col :span="4" push="8">
<!-- 查询输入框 -->
<el-input v-model="input" placeholder="请输入想要查询的学生"></el-input>
</el-col>
<el-button type="primary" icon="el-icon-search" @click="search(input)">查找</el-button>
<el-button type="primary" @click="Add">添加数据</el-button>
<!-- 添加学生信息模态框 -->
<el-dialog title="学生信息" :visible.sync="dialogFormVisible">
<el-form>
<el-form-item label="姓名" :label-width="formLableWidth">
<el-input v-model="studentName"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLableWidth">
<el-radio v-model="studentSex" label="男" border size="medium">男</el-radio>
<el-radio v-model="studentSex" label="女" border size="medium">女</el-radio>
</el-form-item>
<el-form-item label="班级" :label-width="formLableWidth">
<el-select v-model="studentClass" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="学号" :label-width="formLableWidth">
<el-input v-model="studentNumber"></el-input>
</el-form-item>
<el-form-item label="入学时间" :label-width="formLableWidth">
<el-date-picker
v-model="studentDate"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="add(studentName,studentSex,studentClass,studentNumber,studentDate)">保存</el-button>
</div>
</el-dialog>
</div>
<div class="Form-body">
<el-row>
<el-col :span="18" offset="3" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
<el-table :data="tableData" style="width: 100%;" ref="studentTable" height="1000" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
<el-table-column type="index" label="序列" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="sex" label="性别" width="180"></el-table-column>
<el-table-column prop="class" label="班级" width="180"></el-table-column>
<el-table-column prop="number" label="学号" width="360"></el-table-column>
<el-table-column prop="date" label="入学时间" ></el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<i class="el-icon-edit" @click="edit(scope.$index,scope.row)"></i>
<i class="el-icon-close" @click="dele(scope.$index)"></i>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "App_form",
data() {
return {
input: "",
studentName: "",
studentSex: "",
studentClass: "",
studentNumber: "",
studentDate: "",
dialogFormVisible: false,
formLableWidth: "100px",
form: {},
searchData: "",
tableData: [
],
options: [{
value: '1班',
label: '1班'
}, {
value: '2班',
label: '2班'
}, {
value: '3班',
label: '3班'
}, {
value: '4班',
label: '4班'
}, {
value: '5班',
label: '5班'
}],
oldVal: [],
newVal: [],
editIndex: "",
qubie: ""
};
},
methods: {
handleClose(done) {
this.$confirm("确认关闭？")
.then(_ => {
done();
})
.catch(_ => {});
},
// 添加学生信息
add(studentName,studentSex,studentClass,studentNumber,studentDate) {
// 编辑
if (this.qubie === "edit") {
// console.log(this.editIndex);
let studentI = this.tableData[this.editIndex];
// console.log(editBook)
studentI.name = studentName;
studentI.sex = studentSex;
studentI.class = studentClass;
studentI.number = studentNumber;
studentI.date = studentDate;
this.dialogFormVisible = false;
// this.bookName = "";
}
// 新增
if (this.qubie === "add") {
console.log(2);
if (studentName === "" || studentSex === "" || studentClass === "" || studentNumber === "" || studentDate === "") {
this.dialogFormVisible = true;
// console.log(1)
} else {
this.dialogFormVisible = false;
// console.log(bookName, bookAuthor, bookPrice);
let studentIF = {
name: studentName,
sex: studentSex,
class: studentClass,
number: studentNumber,
date: studentDate,
};
this.tableData.push(studentIF);
this.studentName = "";
this.studentSex = "";
this.studentClass = "";
this.studentNumber = "";
this.studentDate = "";
}
}
},
// 删除
dele(index) {
// console.log(index)
this.tableData.splice(index, 1);
},
// 点击编辑按钮
edit(index, row) {
// console.log(row.name);
this.dialogFormVisible = true;
this.studentName = row.name;
this.studentSex = row.sex;
this.studentClass = row.class;
this.studentNumber = row.number;
this.studentDate = row.date;
// console.log(index)
this.editIndex = index;
this.qubie = "edit";
},
// 点击添加按钮
Add() {
this.dialogFormVisible = true;
this.studentName= "",
this.studentSex= "",
this.studentClass= "",
this.studentNumber= "",
this.studentDate= "",
this.qubie = "add";
},
// 查找
search(input) {
// console.log(input)
let newData = [];
this.tableData.map((item, index) => {
if (item.name.includes(input)) {
newData.push(item);
this.$refs.studentTable.data = newData;
}
});
return newData;
// console.log(this.tableData)
},
//处理日期选择器获取的值
getSTime(val) {
this.studentDate=val;//这个sTime是在data中声明的，也就是v-model绑定的值
}
}
};
</script>
<style scoped>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
该标签为固定用法，可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，即可简单当成获取表格每一行的值，以此进行一些数据操作
elementui中内置的图标库，一般通过i标签的形式调用
也可以在标签中加入 icon="el-icon-??",此方法多用于在图标按钮上增加图案
key作为 value 唯一标识的键名，绑定值为对象类型时必填
:data 显示的数据
Aaaay.map(currentValue,index,arr)
循环遍历数组，currentValue当前元素的值，index下表，arr当前元素的数组对象
tabledata.map(iteam,index),循环遍历数组
ref和$refs
ref：用来给元素或者子组件注册信息，
$refs:用来注册引用信息，他是所有注册过的ref的集合
浙公网安备 33010602011771号