vue后台管理系统"编辑按钮"书写逻辑

不废话上思路

外部el-table-column是基础table模板，里面template slot-scope 的主要作用就是获取table一行的数据信息;

其次要加一个对话框，在对话框里输入数值然后提交就可以传入后台就行数据交互。

 

  <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>

 

对话框的代码：

 

 <el-dialog title="修改" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="级别" :label-width="formLabelWidth">
            <el-select v-model="form.level" placeholder="请选择个人身份">
              <el-option label="首席讲师" value="1"></el-option>
              <el-option label="高级讲师" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!-- 点击按钮提交数据后,dialogFormVisible变false -->
          <!-- dialogSubmit提交事件 -->
          <!-- dialogCancel是取消事件 -->
          <el-button @click="dialogCancel()">取 消</el-button>
          <el-button @click="dialogSubmit()" type="primary">确 定</el-button>
        </div>
      </el-dialog>

 

在按钮"编辑"上绑定点击事件，事件中传入scope.row，代表着把每一行的数据信息传入进去; 之后在事件中获取出数据。

 

 //这是""编辑"方法
    handleEdit(row) {
      // index是指计算机的索引,row代表实际table数据的编号
      console.log(row.id);
      this.form.id = row.id;
      //是dialog表单是否可视默认值，默认为false，当handleEdit被点击变为true，
      this.dialogFormVisible = true;
    },

 

获取数据，并且把值传给事先定义好的数据空间里，然后给对话框里的按钮绑定事件，分别有取消和确定。对话框默认是隐藏状态，当点击编辑按钮时，则会显示在页面上。然后点击确定或取消即可消失。 那么如何实现这个功能呢？

首先在对话框里设置一个事件，默认对话框是隐藏的; 如下图

:visible.sync='dialogFormVisible'  其中:visible.sync .sync是什么意思呢,指的就是同步动态双向的来表示visible的值. 把dialogFormVisible放入data地址中，点击编辑框按钮时，dialogFormVisible = true，点击确定按钮 dialogFormVisible = false;

 

 

按钮的绑定事件:

 

   <!-- 点击按钮提交数据后,dialogFormVisible变false -->
          <!-- dialogSubmit提交事件 -->
          <!-- dialogCancel是取消事件 -->
          <el-button @click="dialogCancel()">取 消</el-button>
          <el-button @click="dialogSubmit()" type="primary">确 定</el-button>

 

当以上逻辑实现完成时，给确定按钮绑定一个事件，调用之前定义好数据空间作为axios中的值，与后台进行交互; 

 

  dialogSubmit() {
      console.log(this.form.id);
      //axios提交事件
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8087/admin/dialog/submit`,
        // URL中的查询参数
        //GET需要params参数;
        params: {
          id: this.form.id,
          name: this.form.name,
          level: this.form.level,
        },
      })
        .then((result) => {
          if (result.data != null) {
            this.$message.success("更改成功");
          } else {
            this.$message.error("更改失败");
          }
          // 点击submit后,加载数据后无论成功与否，都会消失！
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("网络连接有问题");
        });
      this.dialogFormVisible = false;
      this.selectNone();
    },