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 表格添加行,修改,单独删除行,批量删除行操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 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
You might like
短波问题解答
2021/02/28 无线电
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python matplotlib库的基本使用
2020/09/23 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
初中班级口号
2014/06/09 职场文书
个人授权委托书范本
2014/09/14 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
护士年终个人总结
2015/02/13 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL