vue element ui表格行编辑功能 新增和修改
<el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"><template slot-scope="scope"><el-date-pickerv-model="scope.row.date"v-if=
·
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.date"
v-if="scope.row.id==editId"
value-format='yyyy-MM-dd'
type="date"
placeholder="选择日期">
</el-date-picker>
<span v-else>{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column
label="姓名">
<template slot-scope="scope">
<el-input v-if="scope.row.id==editId" v-model="scope.row.name"></el-input>
<span v-else>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column
label="省份">
<template slot-scope="scope">
<el-input v-if="scope.row.id==editId" v-model="scope.row.province"></el-input>
<span v-else>{{scope.row.province}}</span>
</template>
</el-table-column>
<el-table-column
label="市区">
<template slot-scope="scope">
<el-input v-if="scope.row.id==editId" v-model="scope.row.city"></el-input>
<span v-else>{{scope.row.city}}</span>
</template>
</el-table-column>
<el-table-column
label="地址">
<template slot-scope="scope">
<el-input v-if="scope.row.id==editId" v-model="scope.row.address"></el-input>
<span v-else>{{scope.row.address}}</span>
</template>
</el-table-column>
<el-table-column
label="邮编">
<template slot-scope="scope">
<el-input v-if="scope.row.id==editId" v-model="scope.row.zip"></el-input>
<span v-else>{{scope.row.zip}}</span>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="text" v-if="scope.row.id!=editId" @click="handleClick(scope.row)" size="small">查看</el-button>
<el-button type="text" v-if="scope.row.id!=editId" @click="changeClick(scope.row)" size="small">编辑</el-button>
<el-button type="text" v-if="scope.row.id!=editId" @click="delClick(scope.row)" size="small">删除</el-button>
<el-button type="text" v-if="scope.row.id==editId" @click="cancelClick(scope.row)" size="small">取消</el-button>
<el-button type="text" v-if="scope.row.id==editId" @click="saveClick(scope.row)" size="small">保存</el-button>
</template>
</el-table-column>
</el-table>
<el-button @click="add">新增</el-button>
</div>
data () {
return {
editData:[], //编辑行初始数据
editId:'', //判断编辑的是哪一行
tableData: [{
id:'1',
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
id:'2',
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
id:'3',
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
id:'4',
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
},
delClick(row){
//删除接口 成功以后 this.editId = ''
},
cancelClick(row){
if(row.id){
for(let i in row){
row[i] = this.editData[i]
}
this.editId = ''
}else{
this.tableData.forEach((item,index)=>{
if(item.id == ''){
this.tableData.splice(index,1)
}
})
}
},
saveClick(row){
//保存接口 成功以后 this.editId = ''
},
changeClick(row){
if(this.tableData.some((item)=>{
return item.id==''
})){
this.$message({
message: '请先保存',
type: 'warning'
});
return
}
this.editData = JSON.parse(JSON.stringify(row)) //把当前行数据存一份,取消的时候行数据还原
this.editId = row.id
},
handleClick(row) {
console.log(row);
},
add(){
if(this.editId!=''){
this.$message({
message: '请先保存',
type: 'warning'
});
return
}
if(this.tableData.some((item)=>{
return item.id==''
})){
this.$message({
message: '请先保存',
type: 'warning'
});
return
}
this.tableData.push(
{
date: '',
name: '',
province: '',
city: '',
address: '',
zip:'',
id:'',
}
)
}
其他根据自己的需求做调整
更多推荐
已为社区贡献5条内容
所有评论(0)