Vue实现增删改查功能

最近公司新接了一个项目，要求没有后端前端画页面写假数据并且相应的功能展示。分给我的大多数都是增删改查一些类似的页面。接下来我们就开始上代码！HTML：<div class="header pad" style="padding: 20px 0"><el-formref="formInline":inline="true":model="formInline"label-width

愤怒的小前端

4950人浏览 · 2021-03-23 10:50:05

愤怒的小前端 · 2021-03-23 10:50:05 发布

最近公司新接了一个项目，要求没有后端前端画页面写假数据并且相应的功能展示。
分给我的大多数都是增删改查一些类似的页面。
接下来我们就开始上代码！

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,
        });
      }
      }