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

 更新时间:2019年05月28日 17:11:43   作者:face light~   我要评论
这篇文章主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

    vue 插件的方法代码详解

    在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。这篇文章主要介绍了如何写一个 vue 插件,需要的朋友可以参考下
    2019-06-06
  • vue debug 二种方法

    vue debug 二种方法

    这篇文章主要介绍了vue debug 二种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue中计算属性computed的示例解读

    Vue中计算属性computed的示例解读

    计算属性和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变。下面这篇文章主要给大家介绍了关于Vue中计算属性computed的相关资料,需要的朋友可以参考下。
    2017-07-07
  • 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解Vue.js——60分钟组件快速入门(上篇)

    详解Vue.js——60分钟组件快速入门(上篇)

    本篇文章主要介绍了Vue.js组件,组件系统是Vue.js其中一个重要的概念,具有一定的参考价值,有需要的可以了解一下。
    2016-12-12
  • vue2 router 动态传参,多个参数的实例

    vue2 router 动态传参,多个参数的实例

    下面小编就为大家带来一篇vue2 router 动态传参,多个参数的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue.js中created方法作用

    vue.js中created方法作用

    这篇文章主要介绍了vue.js中created方法作用及mounted和created的区别介绍,需要的朋友可以参考下
    2018-03-03
  • 如何在vue中使用ts的示例代码

    如何在vue中使用ts的示例代码

    本篇文章主要介绍了如何在vue中使用ts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论、登录、注册、及修改信息功能

    这篇文章主要为大家详细介绍了vue.js实现用户评论、登录、注册、及修改信息功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue2.0开发实践总结之入门篇

    vue2.0开发实践总结之入门篇

    这篇文章主要为大家总结了vue2.0开发实践之入门,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论