最近公司新接了一个项目,要求没有后端前端画页面写假数据并且相应的功能展示。
分给我的大多数都是增删改查一些类似的页面。
接下来我们就开始上代码!
HTML:
<div class="header pad" style="padding: 20px 0">
<el-form
ref="formInline"
:inline="true"
:model="formInline"
label-width="100px"
class="demo-form-inline searchs"
>
<el-form-item label="类型名称">
<el-input
v-model="formInline.lxname"
placeholder="请输入类型名称"
></el-input>
</el-form-item>
<el-form-item label="行业名称">
<el-input
v-model="formInline.hyname"
placeholder="请输入行业名称"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">查询</el-button>
<el-button @click="resetForm">重置</el-button>
<el-button @click="newForm()" class="newForm">新增</el-button>
</el-form-item>
</el-form>
</div>
<div class="content">
<div class="pad">
<el-table :data="tableData" border style="width: 100%">
<el-table-column type="index" width="80" label="序号"> </el-table-column>
<el-table-column prop="name" label="类型名称" width="180">
</el-table-column>
<el-table-column prop="hyname" label="行业名称" width="180"> </el-table-column>
<el-table-column prop="dzname" label="地址区域" width="180"> </el-table-column>
<el-table-column prop="address" label="操作" width="180">
<template slot-scope="scope">
<el-button
@click="edit(scope.$index, scope.row)"
size="mini"
type="primary"
class="normal"
>编辑</el-button
>
<el-button
type="danger"
size="mini"
@click="deleteRow(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 新建弹窗 -->
<div class="messagebox">
<el-dialog :title="titles" :visible.sync="dialogVisible" width="40%">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="类型名称">
<el-select v-model="form.region" placeholder="请选择类型名称">
<el-option label="餐饮" value="餐饮"></el-option>
<el-option label="批发" value="批发"></el-option>
<el-option label="零售" value="零售"></el-option>
<el-option label="住宿" value="住宿"></el-option>
</el-select>
</el-form-item>
<el-form-item label="行业名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="地址区域">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="nosybmit">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
<!-- 删除弹窗 -->
<el-dialog title="删除" :visible.sync="delshow" width="30%">
<span>确定要删除该文档吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="delshow = false">取 消</el-button>
<el-button type="primary" class="normal" @click="sureDel"
>确 定</el-button
>
</span>
</el-dialog>
接下来我们开始做新增操作
js:
// 新建
newForm() {
this.dialogVisible = true; //首先将新建的弹窗设置为true
this.titles = "新建"; //这里我新建和编辑用的是一个弹窗所以我就给她添加了一个titles
this.form = {}; //新建的时候先把弹出框里的表单清空,因为如果不清空会出现编辑过后,在点击新建,表单还有内容
},
// 弹出框的保存按钮
onSubmit() {
var that = this
if (that.titles == "新建") { //如果等于新建就让他执行
that.dialogVisible = false;
that.tableData.push({ //重点在这
name: that.form.region, //将表单的值赋值给table表单里的字段
hyname: that.form.name,
dzname: that.form.desc,
});
that.$message({ //新增成功
message: "新建成功",
type: "success",
duration: 5 * 1000,
});
}
},
然后我们在进行删除操作:
js:
// 删除
deleteRow(index, row) {
console.log(index);
this.delshow = true; //先将删除弹窗该为true
this.thisRow = { //这里我需要先把点击删除的下标获取到,需要注意的是要在data里面定义一下
index: index,
row: row,
};
},
// 删除确认
sureDel() {
this.delshow = false;
var index = this.thisRow.index; //先将下标赋值
this.tableData.splice(index, 1); //重点是这行代码,删除操作 splice(index,1)
this.$message({
message: "删除成功",
type: "success",
duration: 5 * 1000,
});
},
删除功能做好了,接下来我们进行编辑操作:
js:
// 修改
//做编辑的时候我们需要注意的是,我们首先先要把数据赋值给弹框中form表单中
edit(index, row) {
this.dialogVisible = true;
this.titles = "编辑";
this.form.region = row.name; //赋值数据
this.form.name = row.hyname;
this.form.desc = row.dzname;
this.editRow = { //这个和删除的用处一样
index: index,
row: row,
};
},
//编辑保存操作
onSubmit() {
var that = this
if (that.titles == "编辑") {
that.editRow.row.dzname = that.form.desc //将弹窗form表单数据赋值给table表单中
that.editRow.row.hyname = that.form.name
that.editRow.row.name = that.form.region
that.dialogVisible = false;
that.$message({
message: "编辑成功",
type: "success",
duration: 5 * 1000,
});
}
}
这样我们的增删改功能就已经实现了!
查询功能以后我还会继续更新
如果这篇文章对你有帮助,请给我点个赞,谢谢您嘞~