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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
原生js实现验证码功能
Mar 16 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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中将数组存到文件里的实现代码
2012/01/19 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
javascript动画浅析
2012/08/30 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
班级课外活动总结
2014/07/09 职场文书
组工干部对照检查材料
2014/08/25 职场文书
镇创先争优活动总结
2014/08/28 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
医生见习报告范文
2014/11/03 职场文书
新员工入职感言范文!
2019/07/04 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
SpringBoot快速入门详解
2021/07/21 Java/Android
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL