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="!scope.row.isset"

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

type="danger"

round

plain

v-else

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

上面代码中，通过 v-if=“scope.row.isset” 来判断当前行是否处于编辑状态。

如果当前行处于编辑状态，则按钮为“保存”和“取消”，此时可对当前行进行保存和取消操作，且不能新增，除非先保存当前行；

如果当前行处于非编辑状态，则按钮为“编辑”和“删除”状态，此时可对当前行进行编辑和删除操作。

这样，就可以实现 el-table 行内编辑的需求。

完整版代码如下：

width="900px"

:visible.sync="isshow"

:before-close="beforeclose"

:close-on-click-modal="false"

:title="$t('basicdata.device.propdlg.dlgtitle')"

@open="open">

highlight-current-row

border>

type="index"

align="center"

width="50">

v-model="scope.row.code">

{{ scope.row.code }}

v-model="scope.row.name">

{{ scope.row.name }}

v-model="scope.row.minvalue">

{{ scope.row.minvalue }}

v-model="scope.row.maxvalue">

{{ scope.row.maxvalue }}

v-model="scope.row.valuetype"

:placeholder="$t('common.pleselect')">

:key="item.value"

:label="item.label"

:value="item.value">

{{ scope.row.valuetype }}

size="mini">

:key="item.value"

:label="item.label"

:value="item.value">

{{ scope.row.warning===true?'是':'否' }}

width="170px">

slot-scope="scope">

size="mini"

type="success"

round

plain

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

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="!scope.row.isset"

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

type="danger"

round

plain

v-else

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

import { open } from 'fs'

import '@/styles/uiot.scss'

const defaultprop = {

code: '',

maxvalue: '',

minvalue: '',

name: '',

valuetype: 'string',

id: '',

typeid: '',

warning: false

}

export default {

props: {

isshow: boolean,

onerow: {

type: array,

default: function() {

return defaultprop

}

}

},

data() {

return {

proptabledata: {

sel: null, // 选中行

col: []

},

warnoptions: [

{

value: true,

label: '是'

},

{

value: false,

label: '否'

}

],

valtypeoptions: [

{

value: 'string',

label: 'string'

},

{

value: 'int',

label: 'int'

},

{

value: 'double',

label: 'double'

},

{

value: 'boolean',

label: 'boolean'

},

{

value: 'date',

label: 'date'

}

]

}

},

created() {},

methods: {

open() {

this.proptabledata.col = this.onerow

this.proptabledata.col.map(i => {

i.isset = false

})

console.log('open', this.proptabledata.col)

},

// 添加

handleadd() {

for (let i of this.proptabledata.col) {

if (i.isset) {

return this.message(

this.$t('basicdata.device.propdlg.plesave'),

'warning'

)

}

}

let row = {

code: '',

maxvalue: '',

minvalue: '',

name: '',

valuetype: 'string',

id: '',

typeid: '',

warning: false,

isset: true

}

this.proptabledata.col.push(row)

this.proptabledata.sel = row

},

//修改

valchange(row, index, qx) {

console.log('edit', this.proptabledata)

//点击修改，判断是否已经保存所有操作

for (let i of this.proptabledata.col) {

console.log('i.isset', i.isset, i.id, row.id)

if (i.isset && i.id != row.id) {

this.message(this.$t('basicdata.device.propdlg.plesave'), 'warning')

return false

}

}

//是否是取消操作

if (!qx) {

console.log('qx', this.proptabledata.sel.id)

if (!this.proptabledata.sel.id) {

this.proptabledata.col.splice(index, 1)

}

return (row.isset = !row.isset)

}

//提交数据

if (row.isset) {

console.log('this.proptabledata.sel', this.proptabledata.sel)

const v = this.proptabledata.sel

// 必填项判断

if (v.code == '' || v.name == '') {

this.message(this.$t('common.pleenter'), 'warning')

} else {

this.$emit('confirm', this.proptabledata.sel)

row.isset = false

}

} else {

this.proptabledata.sel = row

row.isset = true

}

},

// 删除

handledelete(index, row) {

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

},

beforeclose() {

this.$emit('cancel')

},

message(msg, type) {

this.$message({ type: type ? type : 'info', message: msg })

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！