<template>
<div>
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline"
ref="formInline"
>
<el-form-item label="姓名">
<el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="onSubmit"
>查询</el-button
>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
<div style="height: 10px"></div>
<el-table :data="displayData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column align="right">
<template slot-scope="scope">
<el-button size="mini" type="warning" @click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog :title="title" :visible.sync="dialogFormVisible">
<el-form :model="form" :rules="rules" ref="ruleForm">
<el-form-item label="日期" :label-width="formLabelWidth" prop="date">
<el-date-picker
v-model="form.date"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="请选择日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth" prop="address">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="add">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
title: "",
form: {},
formInline: {},
formLabelWidth: "80px",
dialogFormVisible: false,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
displayData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
date: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
},
};
},
methods: {
handleEdit(row) {
this.form = row;
this.title = "编辑";
this.dialogFormVisible = true;
},
handleDelete(index) {
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.tableData.splice(index, 1);
this.displayData = this.tableData;
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
handleAdd() {
this.form = {};
this.title = "新增";
this.dialogFormVisible = true;
},
add() {
if (this.title == "新增") {
this.tableData.push({
date: this.form.date,
name: this.form.name,
address: this.form.address,
});
this.$message({
type: "success",
message: "操作成功!",
});
this.displayData = this.tableData;
this.dialogFormVisible = false;
} else {
this.tableData.map((item) => {
if (item.name == this.form.name) {
Object.assign(item, this.form);
}
});
this.$message({
type: "success",
message: "操作成功!",
});
this.dialogFormVisible = false;
this.displayData = this.tableData;
}
},
onSubmit() {
if (!this.formInline.name) {
this.$message({
type: "waring",
message: "请输入姓名",
});
} else {
this.displayData = this.tableData.filter(function (item) {
// if (!stuId) return item.name == name;
// if (!name) return item.stuId == stuId;
});
}
},
resetQuery() {
this.formInline.name = "";
this.tableData = [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
];
this.displayData = [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
];
},
},
};
</script>