vue-element之学生信息表删除和修改功能实现

 代码如下：

在操作区域我们可以设置两个按钮删除和

 <el-table-column

          label="操作"

          align="center"

          width="319px"

          class-name="small-padding fixed-width"

        >

          <template slot-scope="scope">

            <el-button type="primary" style="font-size:20px;font-weight:bold" @click="handleUpdate(scope.row)">

              修改

            </el-button>



            <el-button

              type="danger"

              style="font-size:20px;font-weight:bold"

              @click="handleDelete(scope.row.id,index)"

            >

              删除

            </el-button>

          </template></el-table-column>

删除按钮功能实现：

handleDelete(_row, index) {

      this.$notify({

        title: '成功',

        message: '删除成功',

        type: 'success',

        duration: 2000

      })

      this.tableData.splice(index, 1)

    },

修改部分功能实现：

修改用户对话框实现

  <!-- @close="editDialogClosed" 实现修改账户的重置操作-->

      <!-- <修改用户对话框> -->

      <el-dialog

        title="修改信息"

        :visible.sync="editDialogVisible"

        style="font-size:20px;font-weight:bold"

        width="50%"

      >

        <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">

          <!-- <el-form-item label="编号">

            <el-input v-model="editForm.id" disabled />

          </el-form-item> -->

        </el-form>

        <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">

          <el-form-item label="学号" prop="account_name">

            <el-input v-model="editForm.account_name" />

          </el-form-item>

        </el-form>

        <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">

          <el-form-item label="姓名" prop="account">

            <el-input v-model="editForm.account" />

          </el-form-item>

        </el-form>

        <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">

          <el-form-item label="学历" prop="pass">

            <el-select v-model="editForm.pass" placeholder="请选择学历">

              <el-option

                v-for="item in options1"

                :key="item.value"

                :label="item.label"

                :value="item.label"

              />

            </el-select>

          </el-form-item>

        </el-form>

        <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="90px">

          <el-form-item label="成绩等级" prop="account_type">

            <el-select v-model="editForm.account_type" placeholder="请选择成绩等级">

              <el-option

                v-for="item in options2"

                :key="item.value"

                :label="item.label"

                :value="item.label"

              />

            </el-select>

          </el-form-item>

        </el-form>

        <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="100px">

          <el-form-item label="身份证号码" prop="identity_id">

            <el-input v-model="editForm.identity_id" />

          </el-form-item>

        </el-form>

        <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="80px">

          <el-form-item label="联系电话" prop="phone">

            <el-input v-model="editForm.phone" />

          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">

          <el-button type="primary" round @click="editDialogVisible = false">取 消</el-button>

          <el-button type="primary" round @click="editUserInfo">确 定</el-button>

        </span>

      </el-dialog>

script部分:

// 修改表单的验证规则对象

      editFormrules: {

        account_name: [

          { required: true, message: '请输入学号', trigger: 'blur'

          },

          {

            min: 2,

            max: 10,

            message: '学号的长度在2~10个字符',

            trigger: 'blur'

          }

        ],

        account: [

          { required: true, message: '请输入姓名', trigger: 'blur'

          },

          {

            min: 2,

            max: 10,

            message: '姓名的长度在2~10个字符',

            trigger: 'blur'

          }

        ],

        pass: [

          { required: true, message: '请选择学历', trigger: 'blur'

          },

          {



            trigger: 'blur'

          }

        ],



        account_type: [

          { required: true, message: '请选择成绩等级', trigger: 'blur'

          },

          {



            trigger: 'blur'

          }

        ],

        identity_id: [

          { required: true, message: '请输入身份证号码', trigger: 'blur'

          },

          {

            min: 18,

            max: 18,

            message: '身份证的长度为18个字符',

            trigger: 'blur'

          }

        ],

        phone: [

          { required: true, message: '请输入电话号码', trigger: 'blur'

          },

          {

            min: 11,

            max: 11,

            message: '电话号码的长度为11个字符',

            trigger: 'blur'

          }

          // { validator: checkphone, trigger: 'blur' }

        ]



      },

methods部分：

// 修改用户信息并提交

    editUserInfo() {

      this.$refs.editFormRef.validate(valid => {

        if (!valid) return

        // 发起修改用户信息的数据请求/



        // axios.put('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + this.editForm.id, {

        //   account_name: this.editForm.account_name,

        //   account: this.editForm.account,

        //   pass: this.editForm.pass,

        //   account_type: this.editForm.account_type,

        //   identity_id: this.editForm.identity_id,

        //   phone: this.editForm.phone

        // })

        // if (res.status !== 200) {

        //   return this.$message.error('更新用户信息失败！')

        // }

        // 关闭对话框

        this.editDialogVisible = false

        // 刷新数据列表

        // this.fetchdata()

        // 提升修改成功

        this.$message.success('更新用户信息成功！')

      })

    },



// 修改用户信息

    async handleUpdate(row) {

      // console.log(row)

      // const { data: res } = await axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + row)

      // if (res.status !== 200) {

      //   return this.$message.error('查询用户信息失败！')

      // }

      // this.editForm = res.data.data

      // this.editForm = Object.assign({}, row)

      // this.dialogStatus = 'update'

      this.editDialogVisible = true

      this.editForm = row

    },

具体完整代码请参考：http://t.csdn.cn/BSyCd