首页
所有分类
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实现五星评价代码（源码下载）
Aug 11 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
原生js实现弹出层效果
Jan 20 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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
教学反思(909) 接收函(23) 方案(1080) 感言(394) 事迹材料(636) 答谢词(97) 辞职信(98) 证明书(326) 计划书(118) 广播稿(323)
You might like
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
实例解析php的数据类型
2018/10/24 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
日期 时间js控件
2009/05/07 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
深入理解JavaScript系列（43）：设计模式之状态模式详解
2015/03/04 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
js读取本地文件的实例
2017/12/22 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
不归路系列：Python入门之旅-一定要注意缩进！！！（推荐）
2019/04/16 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python实现函数极小值
2019/07/10 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
惠普墨西哥官方商店：HP墨西哥
2016/12/01 全球购物
shell的种类有哪些
2015/04/15 面试题
2014年中职班主任工作总结
2014/12/16 职场文书
2015年计划生育责任书
2015/05/08 职场文书
2019个人工作计划书的格式及范文！
2019/07/04 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
react中的DOM操作实现
2021/06/30 Javascript