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 相关文章推荐
javascript动画浅析
Aug 30 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
原生js实现放大镜
Feb 20 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
Vue引入Stylus知识点总结
Jan 16 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
扩展String功能方法
2006/09/22 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
蔻驰美国官网:COACH美国
2016/08/18 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
巾帼文明岗申报材料
2014/05/01 职场文书
求职信怎么写
2014/05/23 职场文书
司机工作自我鉴定
2014/09/19 职场文书
招商引资工作汇报
2014/10/28 职场文书
小学生暑假安全公约
2015/07/14 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang