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 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
详解javascript遍历方式
Nov 11 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
用vue写一个日历
Nov 02 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 cookie的操作实现代码(登录)
2010/12/29 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python设置检查点简单实现代码
2014/07/01 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python如何在循环引用中管理内存
2018/03/20 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python多线程http压力测试脚本
2019/06/25 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
参观考察邀请函范文
2014/01/29 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
生日答谢词
2015/01/05 职场文书
家长意见书
2015/06/04 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
python 中yaml文件用法大全
2021/07/04 Python