1. 首页
  2. 文章中心
  3. JavaScript

vue el-table实现行内编辑功能

928 阅读 0 评论
我是靠谱客的博主 迷路凉面，这篇文章主要介绍vue el-table实现行内编辑功能，现在分享给大家，希望可以做个参考。

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

分为下面几个步骤：

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

复制代码
1
2
3
4
<el-table :data="propTableData.col.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"
   highlight-current-row
   border>
</el-table>
复制代码
1
2
3
4
5
6
7
8
9
<template slot="header"
  slot-scope="scope">
  <el-button v-model="handleAdd"
    size="mini"
    type="success"
    round
    plain
    @click="handleAdd(scope.$index, scope.row)">{{ $t('common.add') }}</el-button>
</template>

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

（2） el-table 动态添加一行：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
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 保存当前行数据：

复制代码
1
this.propTableData.sel = row

（3） el-table 动态删除一行：

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

复制代码
1
this.$emit('delete', row.id)

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template slot-scope="scope">
   <el-button size="mini"
      type="primary"
      round
      plain
      v-if="!scope.row.isSet"
      @click="valChange(scope.row,scope.$index,true)">{{ $t('common.edit') }}</el-button>
   <el-button size="mini"
      type="primary"
      round
      plain
      v-else
      @click="valChange(scope.row,scope.$index,true)">{{ $t('common.save') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-if="!scope.row.isSet"
      @click="handleDelete(scope.$index, scope.row)">{{ $t('common.delete') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-else
      @click="valChange(scope.row,scope.$index,false)">{{ $t('common.cancel') }}</el-button>
</template>

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

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

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

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

完整版代码如下：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<template>
 <el-dialog class="uiot-dialog"
    width="900px"
    :visible.sync="isShow"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    :title="$t('basicData.device.propDlg.dlgTitle')"
    @open="open">
 <el-table :data="propTableData.col.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"
    highlight-current-row
    border>
  <el-table-column label="No."
      type="index"
      align="center"
      width="50"></el-table-column>
  <el-table-column :label="$t('basicData.device.propDlg.code')">
  <template slot-scope="scope">
   <span v-if="scope.row.isSet">
   <el-input size="mini"
      v-model="scope.row.code"></el-input>
   </span>
   <span v-else>{{ scope.row.code }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicData.device.propDlg.name')">
  <template slot-scope="scope">
   <span v-if="scope.row.isSet">
   <el-input size="mini"
      v-model="scope.row.name"></el-input>
   </span>
   <span v-else>{{ scope.row.name }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicData.device.propDlg.minValue')">
  <template slot-scope="scope">
   <span v-if="scope.row.isSet">
   <el-input size="mini"
      v-model="scope.row.minValue"></el-input>
   </span>
   <span v-else>{{ scope.row.minValue }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicData.device.propDlg.maxValue')">
  <template slot-scope="scope">
   <span v-if="scope.row.isSet">
   <el-input size="mini"
      v-model="scope.row.maxValue"></el-input>
   </span>
   <span v-else>{{ scope.row.maxValue }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicData.device.propDlg.valueType')">
  <template slot-scope="scope">
   <span v-if="scope.row.isSet">
   <el-select size="mini"
      v-model="scope.row.valueType"
      :placeholder="$t('common.pleSelect')">
    <el-option v-for="item in valTypeOptions"
       :key="item.value"
       :label="item.label"
       :value="item.value"></el-option>
   </el-select>
   </span>
   <span v-else>{{ scope.row.valueType }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicData.device.propDlg.warning')">
  <template slot-scope="scope">
   <span v-if="scope.row.isSet">
   <el-select v-model="scope.row.warning"
      size="mini">
    <el-option v-for="item in warnOptions"
       :key="item.value"
       :label="item.label"
       :value="item.value"></el-option>
   </el-select>
   </span>
   <span v-else>{{ scope.row.warning===true?'是':'否' }}</span>
  </template>
  </el-table-column>
  <el-table-column align="center"
      width="170px">
  <template slot="header"
     slot-scope="scope">
   <el-button v-model="handleAdd"
      size="mini"
      type="success"
      round
      plain
      @click="handleAdd(scope.$index, scope.row)">{{ $t('common.add') }}</el-button>
  </template>
  <template slot-scope="scope">
   <el-button size="mini"
      type="primary"
      round
      plain
      v-if="!scope.row.isSet"
      @click="valChange(scope.row,scope.$index,true)">{{ $t('common.edit') }}</el-button>
   <el-button size="mini"
      type="primary"
      round
      plain
      v-else
      @click="valChange(scope.row,scope.$index,true)">{{ $t('common.save') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-if="!scope.row.isSet"
      @click="handleDelete(scope.$index, scope.row)">{{ $t('common.delete') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-else
      @click="valChange(scope.row,scope.$index,false)">{{ $t('common.cancel') }}</el-button>
  </template>
  </el-table-column>
 </el-table>
 </el-dialog>
</template>

<script>
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 })
 }
 }
}
</script>

<style lang="scss">
</style>

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

最后

以上就是迷路凉面最近收集整理的关于vue el-table实现行内编辑功能的全部内容，更多相关vue内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(613)

相关文章

vue element自定义表单验证请求后端接口验证
vue element自定义表单验证请求后端接口验证
Vue实现渲染数据后控制滚动条位置(推荐)
Vue实现渲染数据后控制滚动条位置(推荐)
Vue.js实现可编辑的表格
Vue.js实现可编辑的表格
详解vue中$nextTick和$forceUpdate的用法
详解vue中$nextTick和$forceUpdate的用法
vue el-table实现行内编辑功能
vue el-table实现行内编辑功能
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Vue分页效果与购物车功能
Vue分页效果与购物车功能
Vue如何获取数据列表展示
Vue如何获取数据列表展示

评论列表共有 0 条评论

立即
投稿
返回
顶部