table添加一行且可编辑 vue_vue el-table实现行内编辑功能

最近做一个vue前后端分离的项目，前端框架用element ui，在 使用 el-table 的过程中，需要实现行内编辑，效果大概是这样：

分为下面几个步骤：

(1) 自定义 el-table 的表头(即添加 “新增” 按钮)：

highlight-current-row

border>

slot-scope="scope">

size="mini"

type="success"

round

plain

@click="handleadd(scope.$index, scope.row)">{ { $t('common.add') }}

表头自定义了一个“添加”按钮，点击 el-table 动态添加一行。

(2) el-table 动态添加一行：

let row = {

code: '',

maxvalue: '',

minvalue: '',

name: '',

valuetype: 'string',

id: '',

typeid: '',

warning: false,

isset: true

}

this.proptabledata.col.push(row)

vue 数据变化驱动 dom 进行更新，给 table 绑定的数据 proptabledata.col 添加一个元素，则表格会添加一行。

proptabledata.sel 保存当前行数据：

this.proptabledata.sel = row

(3) el-table 动态删除一行：

子组件中触发父组件的 delete 事件：

this.$emit('delete', row.id)

(4)当前行状态判断，即是否处于编辑状态，控制表格每一行的按钮元素的移除与插入：

type="primary"

round

plain

v-if="!scope.row.isset"

@click="valchange(scope.row,scope.$index,true)">{ { $t('common.edit') }}

type="primary"

round

plain

v-else

@click="valchange(scope.row,scope.$index,true)">{ { $t('common.save') }}

type="danger"

round

plain

v-if&