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 相关文章推荐
javascript操作JSON的要领总结
Dec 09 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
利用JS实现数字增长
Jul 28 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
vue 组件基础知识总结
Jan 26 Vue.js
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
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
浅析php创建者模式
2014/11/25 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
treepanel动态加载数据实现代码
2012/12/15 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
JS FormData上传文件的设置方法
2017/07/05 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
浅谈python常用程序算法
2019/03/22 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python extract及contains方法代码实例
2020/09/11 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
DBA的职责都有哪些
2012/05/16 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
构造方法和其他方法的区别
2016/04/26 面试题
岗位职责的含义
2013/11/17 职场文书
应届大学生自荐书
2014/06/17 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
环保守法证明
2015/06/24 职场文书