el-table表单实现点击编辑按钮对内容进行编辑

el-table表单实现点击编辑按钮对内容进行编辑

话不多说，先上效果图

这里我将按钮绑定了dialog对话框，避免直接在原有表行之间进行修改，因为后台管理系统多是响应式布局，使用dialog对话框可以更直观的让用户对内容进行编辑，而对于在原有表行中进行编辑，可能会因为窗口的大小造成编辑上的不便，这仅是个人理解

下面上代码
首先在表行中的el-button绑定el-dialog对话框
在饿了么的开发文档上写的很清晰，使用visible

<el-dialog id="edit" title="数据产品目录名称" :visible.sync="editOn">

来控制dialog对话框的显隐，首先在data中声明editOn为false，即dialog对话框不显示

editOn: false,

之后在按钮上绑定点击事件，使这个值变为true即可显示

<el-button type="primary" size="small" @click="handleEdit(scope.$index,scope.row), editOn = true">

handleEdit中分别传入的是当前行的下标和本行数据
这里scope.row传入的是一个Object对象，可以自行打印看下，然后将其中的每一项数据双向绑定到dialog对话框里面的form表单下的input框中

<el-dialog id="edit" title="数据产品目录名称" :visible.sync="editOn">
        <el-form :model="dialogData" label-width="120px" ref="dialogData">
          <el-form-item label="上级产品目录">
            <el-input v-model="dialogData.upperStory" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="产品目录名称"
            prop="data"
            :rules="{ required: true, message: '所填内容不可为空' }"
          >
            <el-input v-model="dialogData.data" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="目录编码"
            prop="code"
            :rules="{ required: true, message: '所填内容不可为空' }"
          >
            <el-input v-model="dialogData.code" ></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="dialogData.num" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="描述"
            prop="description"
            :rules="{ required: true, message: '所填内容不可为空' }"
          >
            <el-input v-model="dialogData.description"  type="textarea"></el-input>
          </el-form-item>
          <el-form-item style="text-align: right;">
            <el-button size="small" @click=" editOn = false " type="primary">取消</el-button>
            <el-button size="small" @click="CheckValid()" type="primary">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

由于点击取消按钮将不会对数据有任何影响，所以只是起到一个关闭dialog对话框的效果，直接editOn = false就好
而保存按钮需要做一些逻辑的处理，首先给定了表单的ref值：dialogData
下面直接看CheckValid方法

CheckValid () {
      this.$refs.dialogData.validate((valid) => {
        if (valid) {
          this.tableData[this.index].data = this.dialogData.data
          this.tableData[this.index].code = this.dialogData.code
          this.tableData[this.index].description = this.dialogData.description
          this.editOn = false
        } else {
          alert('编辑内容有误,请您检查提示信息并重新编辑后提交')
          return false
        }
      })
    }

validate方法必须是要含有表单验证，即上面代码中的:rule规则，valid表示如果是有效的即做以下的行为。

好啦，代码写到这里功能就实现啦！是不是很简单
如果有更为简洁更好的方法望大佬不吝赐教，我是一只刚刚踏入前端的小菜鸡- -、