Vue+Element实现表格编辑、删除、以及新增行的最优方法


Posted in Javascript onMay 28, 2019

之前已经实现了表格的新增、编辑和删除,在我的上篇文章中写的也比较详细。但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入。从代码上来说,代码量也较大;而且使用的是原生的html标签,有点尴尬。

于是,进一步研以后,进行了一定的优化,直接使用vue的代码实现,不仅大大减少了代码量,还实现了操作的友好性。下面直接上代码:

1 html部分

这次的优化其实主要在于html部分,直接将vue的el-input标签或者el-select标签放入表格的每个单元格中。这样就不用去考虑表格内容的编辑问题了。

<el-form :model="inServForm" ref="inServForm" label-width="130px" size="small">
    <el-form-item label="输入参数列表" prop="servin" >
    <el-button type="primary" @click="addRow(infiledList)">新增</el-button>
    <template>
     <el-table border :data="infiledList" style="width: 100%" >
      <el-table-column prop="fildna" label="名称" style="width:6vw;" >
      <template scope="scope">
       <el-input size="mini" v-model="scope.row.fildna" ></el-input>
      </template>
      </el-table-column>
      <el-table-column prop="fildtp" label="类型">
      <template scope="scope">
       <el-select v-model="scope.row.fildtp" clearable >
        <el-option
        v-for="item in fildtps"
        :key="item.value"
        :label="item.text"
        :value="item.value">
        </el-option>
       </el-select>
      </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      <template scope="scope">
         <el-input size="mini" v-model="scope.row.remark" ></el-input>
      </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
    <template slot-scope="scope">
    <el-button @click.native.prevent="deleteRow(scope.$index, infiledList)" size="small"> 移除 </el-button>
    </template>
    </el-table-column>
   </el-table>
   </template>
  </el-form-item>
</el-form>

2 数据定义部分

data () {
 return {
infiledList:[],
 fildtps:[{text:'字符',value:'1'},{text:'数字',value:'2'}],

}

3 方法部分

methods: {
 deleteRow(index, rows) {//删除改行
    rows.splice(index, 1);
    },
  addRow(tableData,event){
  tableData.push({ fildna: '',fildtp:'',remark:''
  })
  },
}

4 效果图展示

Vue+Element实现表格编辑、删除、以及新增行的最优方法

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

Javascript 相关文章推荐
js中return false(阻止)的用法
Aug 14 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
VUE实现日历组件功能
Mar 13 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
Javascript三种字符串连接方式及性能比较
May 28 #Javascript
vue+element实现表格新增、编辑、删除功能
May 28 #Javascript
Vue实现表格批量审核功能实例代码
May 28 #Javascript
vue+Element实现搜索关键字高亮功能
May 28 #Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 #Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 #Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 #Javascript
You might like
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Open and Print a Word Document
2007/06/15 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
趣味运动会策划方案
2014/06/02 职场文书
学校节能减排方案
2014/06/13 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Python OpenCV形态学运算示例详解
2022/04/07 Python