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

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

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))
    }
  }
 
}

运行图片

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

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))
    }
  }
 
} 
 

运行图

3.批量删除行数

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