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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
js Dom实现换肤效果
Oct 21 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
JS class语法糖的深入剖析
Jul 07 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP反射基础知识回顾
2020/09/10 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
python实现图片转字符画的完整代码
2021/02/21 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
授权委托书
2014/09/17 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python