首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

Posted in Javascript onJuly 18, 2020

1.表格动态添加，也可删除

<template>
 <div class="TestWord">
   <el-button @click="addLine">添加行数</el-button>
   <el-button @click="save">保存</el-button>
    <el-table
     :data="tableData"
     style="width: 100%">
     <el-table-column prop="bookname" label="书名">
       <template slot-scope="scope">
       <el-input v-model="scope.row.bookname" placeholder="书名"></el-input>
       </template>
     </el-table-column>
     <el-table-column prop="bookvolume" label="册数">
       <template slot-scope="scope">
       <el-input v-model="scope.row.bookvolume" placeholder="册数"></el-input>
       </template>
     </el-table-column>
     <el-table-column prop="bookbuyer" label="购买者">
       <template slot-scope="scope">
 
       <el-input v-model="scope.row.bookbuyer" placeholder="购买者"></el-input>
       </template>
     </el-table-column>
     <el-table-column prop="bookborrower" label="借阅者">
       <template slot-scope="scope">
       <el-input v-model="scope.row.bookborrower" placeholder="借阅者"></el-input>
       </template>
     </el-table-column>
     <el-table-column prop="bookbuytime" label="购买日期">
       <template slot-scope="scope">
        <el-date-picker
         v-model="scope.row.bookbuytime"
         type="date"
         format="yyyy-MM-dd"
         value-format="yyyy-MM-dd"
         placeholder="购买日期">
        </el-date-picker>
       </template>
     </el-table-column>
     <el-table-column prop="bookbuytime" label="购买日期">
       <template slot-scope="scope">
        <el-button
         size="mini"
         type="danger"
         v-if="!scope.row.editing"
         icon="el-icon-delete"
         @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
       </template>
     </el-table-column>
  </el-table>
 </div>
</template>

vuejs 代码

export default {
  name:'TestWorld',
  data() {
    return {
      tableData:[{
        bookname: '',
        bookbuytime: '',
        bookbuyer: '',
        bookborrower: '',
        bookvolume:''
      }]
    }
  },
  methods:{
    addLine(){ //添加行数
      var newValue = {
         bookname: '',
         bookbuytime: '',
         bookbuyer: '',
         bookborrower: '',
         bookvolume:''
       };
      //添加新的行数
      this.tableData.push(newValue);
    },
    handleDelete(index){ //删除行数
      this.tableData.splice(index, 1)
    },
    save(){
     //这部分应该是保存提交你添加的内容
     console.log(JSON.stringify(this.tableData))
    }
  }
 
}

运行图片

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

2.编辑表格 （即使input已经修改过，当点击取消时，内容不会变）

<template>
  <div class="TestWorld">
   <el-button @click="savemodify">保存</el-button>
    <el-table
     :data="modifyData"
     style="width: 100%">
     <el-table-column prop="bookname" label="书名">
      <template slot-scope="scope">
 	     	<template v-if="scope.row.editing">
 	      	<el-input class="edit-input" v-model="scope.row.bookname" placeholder="书名"></el-input>
 	     	</template>
 	     	<span v-else>{{ scope.row.bookname }}</span>
 	    </template>
     </el-table-column>
     <el-table-column prop="bookvolume" label="册数">
       <template slot-scope="scope">
        <template v-if="scope.row.editing">
         <el-input class="edit-input" v-model="scope.row.bookvolume" placeholder="册数"></el-input>
        </template>
        	<span v-else>{{ scope.row.bookvolume}}</span>
       </template>
     </el-table-column>
     <el-table-column prop="bookbuyer" label="购买者">
       <template slot-scope="scope">
        <template v-if="scope.row.editing">
         <el-input class="edit-input" v-model="scope.row.bookbuyer" placeholder="购买者"></el-input>
        </template>
        <span v-else>{{scope.row.bookbuyer}}</span>
       </template>
     </el-table-column>
     <el-table-column prop="bookborrower" label="借阅者">
       <template slot-scope="scope">
        <template v-if="scope.row.editing">
         <el-input class="edit-input" v-model="scope.row.bookborrower" placeholder="借阅者"></el-input>
        </template>
        <span v-else>{{scope.row.bookborrower}}</span>
       </template>
     </el-table-column>
     <el-table-column prop="bookbuytime" label="购买日期">
       <template slot-scope="scope">
        <template v-if="scope.row.editing">
         <el-date-picker
          v-model="scope.row.bookbuytime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="购买日期">
         </el-date-picker>
        </template>
       <span v-else>{{scope.row.bookbuytime}}</span>
       </template>
     </el-table-column>
     <el-table-column prop="editing" label="操作">
       <template slot-scope="scope">
        <el-button
         type="danger"
         v-if="!scope.row.editing"
         icon="el-icon-delete"
         v-model="scope.$index"
         @click="handleEdit(scope.$index, scope.row)">编辑
        </el-button>
        <el-button
         v-else
         type="danger"
         icon="el-icon-delete"
         v-model="scope.$index"
         @click="handleCancle(scope.$index, scope.row)">取消
        </el-button>
       </template>
     </el-table-column>
    </el-table>
  </div>
</template>

vuejs 代码

export default {
  name:'TestWorld',
  data() {
    return {
       modifyData:[],
       prevValue:{}
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    getData(){
      this.$ajax({
        method: 'get',
        url:'../static/json/1.1.1.json', //<---本地地址
        //url: '/api/drummer/8bd17859',
      }).then((response)=>{
        console.log(JSON.stringify(response.data))
 
        let _data = response.data;
        let datalength = _data.length;
        for(let i = 0;i < datalength; i++){
          this.$set(_data[i], 'editing', false)
        }
        //赋值
        this.modifyData = _data;
          
       }).catch(function(err){
         console.log(err)
       })
    },
    handleEdit(index,row){
     row.editing = true;
     console.log(index)
     this.prevValue = JSON.parse(JSON.stringify(row));
    },
    handleCancle(index,row){
     row.editing = false;
     let prevContent = this.prevValue.bookname;
     this.$set(row,"bookname",prevContent);
    },
    savemodify(){
     console.log(JSON.stringify(this.modifyData))
    }
  }
 
}

本地的1.1.1.JSON数据

[{"bookname":"普通高等教育物联网工程专业规划用书：物联网技术概论","bookbuytime": "2016-05-04","bookbuyer": "李晓月","bookborrower": "王小虎","bookvolume":"1"},{"bookname":"区块链革命：比特币底层技术如何改变货币、商业和世界","bookbuytime": "2016-05-04","bookbuyer": "李晓月","bookborrower": "李小虎","bookvolume":"1"},{"bookname":"大家一起学配色：数学色彩设计全能书","bookbuytime": "2017-12-04","bookbuyer": "张晓月","bookborrower": "王而虎","bookvolume":"1"}]

如果不用get本地数据，vuejs如下 

export default {
  name:'TestWorld',
  data() {
    return {
       modifyData:[
          {
            bookname: '普通高等教育物联网工程专业规划用书：物联网技术概论',
            bookbuytime: '2016-05-04',
            bookbuyer: '李晓月',
            bookborrower: '王小虎',
            bookvolume: '1',
            editing: false
          },
          {
            bookname: '区块链革命：比特币底层技术如何改变货币、商业和世界',
            bookbuytime: '2016-05-04',
            bookbuyer: '李晓月',
            bookborrower: '李小虎',
            bookvolume: '1',
            editing: false
          },
          {
            bookname: '大家一起学配色：数学色彩设计全能书',
            bookbuytime: '2017-12-04',
            bookbuyer: '张晓月',
            bookborrower: '王而虎',
            bookvolume: '1',
            editing: false
          }
        ],
       prevValue:{}
    }
  },
  methods:{
    handleEdit(index,row){ //编辑
     row.editing = true;
     console.log(index)
     this.prevValue = JSON.parse(JSON.stringify(row));
    },
    handleCancle(index,row){ //取消
     row.editing = false;
     let prevContent = this.prevValue.bookname;
     this.$set(row,"bookname",prevContent);
    },
    savemodify(){
     console.log(JSON.stringify(this.modifyData))
    }
  }
 
}

运行图

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

3.批量删除行数

<template>
  <div class="TestWorld">
    <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark"   style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
     <el-button @click="batchDelete">批量删除</el-button>
     <el-button @click="toggleSelection()">取消选择</el-button>
   </div>
  </div>
</template>

vuejs 代码

export default {
  name:'TestWorld',
  data() {
    return {
        tableData3: [
          {
           date: '2016-05-03',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
          }, 
          {
           date: '2016-05-02',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
          },
          {
           date: '2016-05-04',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
          },
          {
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
          },
          {
           date: '2016-05-08',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
          },{
           date: '2016-05-06',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
          },{
           date: '2016-05-07',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
          }],
          multipleSelection: []
    }
  },
  methods:{
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
     },
     batchDelete(){
       let multData = this.multipleSelection;
       let tableData =this.tableData3;
       let multDataLen = multData.length;
       let tableDataLen = tableData.length;
       for(let i = 0; i < multDataLen ;i++){ 
         for(let y=0;y < tableDataLen;y++){
           if(JSON.stringify(tableData[y]) == JSON.stringify(multData[i])){ //判断是否相等，相等就删除
            this.tableData3.splice(y,1)
            console.log("aa")
           }
         }
       }
     },
     handleSelectionChange(val) {
      this.multipleSelection = val;
     }
  }
 
}

有关验证的代码，看上面，持续更新~

以上这篇vuejs element table 表格添加行,修改,单独删除行,批量删除行操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

- Author -

qianyiyiyi

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
js tab 选项卡
Apr 26 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）
Mar 04 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
vue element table中自定义一些input的验证操作
Jul 18 #Javascript
vue cli4.0项目引入typescript的方法
Jul 17 #Javascript
js实现省级联动（数据结构优化）
Jul 17 #Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 #Javascript
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 #Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 #Javascript
router(1) Date(1) 驱动模型(1) 路由(1) 接口(1) 自动播放(1) 静态压缩(1) 分区(2) 抽象类(1) 乱码(3)
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游，火狐
2011/01/27 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python多线程原理与用法详解
2018/08/20 Python
详解pandas DataFrame的查询方法（loc,iloc,at,iat,ix的用法和区别）
2019/08/02 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
Myprotein荷兰官网：欧洲第一运动营养品牌
2020/07/11 全球购物
八一建军节活动方案
2014/02/10 职场文书
小学生开学感言
2014/02/28 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
2019年国庆祝福语（70句）
2019/09/19 职场文书
退休劳动合同怎么写？
2019/10/25 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Go归并排序算法的实现方法
2022/04/06 Golang