vuejselementtable表格添加⾏，修改，单独删除⾏，批量删除
⾏操作
1.表格动态添加，也可删除
<template>
<div class="TestWord">
<el-button @click="addLine">添加⾏数</el-button>
<el-button @click="save">保存</el-button>
<el-table
:data="tableData"
>
<el-table-column prop="bookname" label="书名">
<template slot-scope="scope">
<el-input v-model="w.bookname" placeholder="书名"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookvolume" label="册数">
<template slot-scope="scope">
<el-input v-model="w.bookvolume" placeholder="册数"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookbuyer" label="购买者">
<template slot-scope="scope">
<el-input v-model="w.bookbuyer" placeholder="购买者"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookborrower" label="借阅者">
<template slot-scope="scope">
<el-input v-model="w.bookborrower" placeholder="借阅者"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookbuytime" label="购买⽇期">
<template slot-scope="scope">
<el-date-picker
v-model="w.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="!w.editing"
icon="el-icon-delete"
@click="handleDelete(scope.$index, w)">删除
</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))
}
}
}
运⾏图⽚
2.编辑表格（即使input已经修改过，当点击取消时，内容不会变）
<template>
<div class="TestWorld">
<el-button @click="savemodify">保存</el-button>
<el-table
:data="modifyData"
>
<el-table-column prop="bookname" label="书名">
<template slot-scope="scope">
<template v-if="w.editing">
<el-input class="edit-input" v-model="w.bookname" placeholder="书名"></el-input>        </template>
<span v-else>{{ w.bookname }}</span>
</template>
</el-table-column>
<el-table-column prop="bookvolume" label="册数">
<template slot-scope="scope">
<template v-if="w.editing">
<el-input class="edit-input" v-model="w.bookvolume" placeholder="册数"></el-input>        </template>
<span v-else>{{ w.bookvolume}}</span>
</template>
</el-table-column>
<el-table-column prop="bookbuyer" label="购买者">
<template slot-scope="scope">
<template v-if="w.editing">
<el-input class="edit-input" v-model="w.bookbuyer" placeholder="购买者"></el-input>
</template>
<span v-else>{{w.bookbuyer}}</span>
</template>
</el-table-column>
<el-table-column prop="bookborrower" label="借阅者">
<template slot-scope="scope">
<template v-if="w.editing">
<el-input class="edit-input" v-model="w.bookborrower" placeholder="借阅者"></el-input>        </template>
<span v-else>{{w.bookborrower}}</span>
</template>
</el-table-column>
<el-table-column prop="bookbuytime" label="购买⽇期">
<template slot-scope="scope">
<template v-if="w.editing">
<el-date-picker
v-model="w.bookbuytime"
type="date"
value-format="yyyy-MM-dd"
placeholder="购买⽇期">
</el-date-picker>
</template>
<span v-else>{{w.bookbuytime}}</span>
</template>
</el-table-column>
<el-table-column prop="editing" label="操作">
<template slot-scope="scope">
<el-button
type="danger"
v-if="!w.editing"
icon="el-icon-delete"
v-model="scope.$index"
@click="handleEdit(scope.$index, w)">编辑
</el-button>
<el-button
v-else
type="danger"
icon="el-icon-delete"
v-model="scope.$index"
@click="handleCancle(scope.$index, w)">取消
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
vuejs 代码
export default {
name:'TestWorld',
data() {
return {
modifyData:[],
prevValue:{}
}
},
mounted(){
},
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)
}
//赋值
}).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.difyData))
}
}
}
本地的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.difyData))
}
}
}
运⾏图
3.批量删除⾏数
<template>
<div class="TestWorld">
<el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark"  @selection-change="handleSelectionChange">      <el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="⽇期" width="120">
<template slot-scope="scope">{{ w.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 >
<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: '王⼩虎',delete删除表格还是内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。