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

这篇文章主要为大家详细介绍了vue el-table实现行内编辑功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
 

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

vue 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 行内编辑的需求。

vue 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

上一篇:springboot注入范围(Scope)即作用域


下一篇:#范围 (scope)-1