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


Posted in Javascript onDecember 11, 2019

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

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

分为下面几个步骤:

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

<el-table :data="propTableData.col.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"
   highlight-current-row
   border>
</el-table>
<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 动态添加一行:

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)当前行状态判断,即是否处于编辑状态,控制表格每一行的按钮元素的移除与插入:

<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实现行内编辑功能

完整版代码如下:

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

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

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
JavaScript 下载svg图片为png格式
Jun 21 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
Vue.js实现可编辑的表格
Dec 11 #Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 #Javascript
用JS实现一个简单的打砖块游戏
Dec 11 #Javascript
js消除图片小游戏代码
Dec 11 #Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 #Javascript
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
You might like
PHP数据库操作面向对象的优点
2006/10/09 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
python中的yield使用方法
2014/02/11 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
opencv+python实现均值滤波
2020/02/19 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
夜大自我鉴定
2013/10/31 职场文书
季度思想汇报
2014/01/01 职场文书
运动会广播稿500字
2014/01/28 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
靠谱的活动总结
2019/04/16 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
Python机器学习之决策树和随机森林
2021/07/15 Javascript
搭建Yolov5服务器
2022/04/30 Servers
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS