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

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

添加行数

保存

:data="tableData"

style="width: 100%">

v-model="scope.row.bookbuytime"

type="date"

format="yyyy-MM-dd"

value-format="yyyy-MM-dd"

placeholder="购买日期">

size="mini"

type="danger"

v-if="!scope.row.editing"

icon="el-icon-delete"

@click="handleDelete(scope.$index, scope.row)">删除

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已经修改过，当点击取消时，内容不会变)

保存

:data="modifyData"

style="width: 100%">

{{ scope.row.bookname }}

{{ scope.row.bookvolume}}

{{scope.row.bookbuyer}}

{{scope.row.bookborrower}}

v-model="scope.row.bookbuytime"

type="date"

value-format="yyyy-MM-dd"

placeholder="购买日期">

{{scope.row.bookbuytime}}

type="danger"

v-if="!scope.row.editing"

icon="el-icon-delete"

v-model="scope.$index"

@click="handleEdit(scope.$index, scope.row)">编辑

v-else

type="danger"

icon="el-icon-delete"

v-model="scope.$index"

@click="handleCancle(scope.$index, scope.row)">取消

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.批量删除行数

{{ scope.row.date }}

批量删除

取消选择

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