element Vue-表单删除按钮以及修改按钮的使用(附加dialog对话的使用)

先上代码：

 

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

 

先看修改代码如何操作:

 

<el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" label-width="120px">
            <!-- autocomplete="off" 关闭自动提示 -->
            <el-input v-model="user.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="等级" label-width="120px">
            <el-select v-model="user.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">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>


methods: {
    handleEdit(index, row) {
      //index指索引也就是0,1,2,3的计算机顺序，而row是指我们表单的实际编号
      this.dialogFormVisible = true;
//user是data中的数据数组,把row赋值给user 也就是把row赋值给user中的编号
      this.user = row;

      console.log(index, row);
    },
    
    // 提交用户信息 与对话框的确认按钮所绑定，触发确定按钮也就触发了方法;
    submit() {
      console.log(this.user.id, this.user.name, this.user.level);
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8087/UpdateContorller`,
        // URL中的查询参数
        //GET需要params参数;
        params: {
//参数与对话框设定的数值绑定
          id: this.user.id,
          name: this.user.name,
          level: this.user.level,
        },
      }).then((result) => {
        console.log(result.data);
        if (result.data != null) {
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
          this.select();
        }
      });
    },

 

再看删除按钮如何操作：

 

  <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" label-width="120px">
            <!-- autocomplete="off" 关闭自动提示 -->
            <el-input v-model="user.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="等级" label-width="120px">
            <el-select v-model="user.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">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>


 methods: {
   //删除代码
    handleDelete(index, row) {
      console.log(index);
        //当删除按钮被点击时，直接执行axios后台操作即可，不过参数id要和row绑定，因为绑定后删除根据用户点击的编号自动更改参数ID
      axios
        .delete("http://localhost:8087/DeleteFromId", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data != null) {
            this.$message.success("删除成功");
            this.select();
          }
        });
    },
    
};