完整的Vue+element-uitable组件实现表格内容的编辑删除和新⾏添加⼩实例copy ⽂档  l
先上⼀张页⾯展⽰图，画⾯很简单（当然这个功能也很简单，不过笔者刚接触Vue，为了避免以后出现相同需求再重写，所以记录⼀下）
⽼样⼦，直接贴代码，不多BB
<template>
<el-row type="flex" justify="center">
<el-col :span="24">
<el-table
:data="tableData"
:stripe="true"
height="100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="客户 ID"
width="auto"
align="center"
:resizable="false">
<template slot-scope="scope">
<el-input v-if=" isEdit == scope.$index " v-model="w.date" placeholder="请输⼊内容" ></el-input>
<span v-if=" isEdit != scope.$index ">{{ w.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="地域别"
width="auto"
align="center"
:resizable="false">
<template slot-scope="scope">
<el-input v-if=" isEdit == scope.$index " v-model="w.name" placeholder="请输⼊内容" ></el-input>
<span v-if=" isEdit != scope.$index ">{{ w.name }}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="auto"
align="center"
:resizable="false">
<template slot-scope="scope">
<el-button-group>
<el-button
v-if=" isEdit == scope.$index "
size="mini"
@click="handleEdit(scope.$index, w, 1)">保存</el-button>
<el-button
v-if=" isEdit != scope.$index "
size="mini"
@click="handleEdit(scope.$index, w, 0)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, w)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
<el-button
slot="append"
@click="appendNew">点击追加⼀⾏</el-button>
</el-table>
</el-col>
</el-row>
</template>
vue element admin
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王⼩虎'
}, {
date: '2016-05-04',
name: '王⼩虎'
}, {
date: '2016-05-01',
name: '王⼩虎'
}, {
date: '2016-05-03',
name: '王⼩虎'
}],
isEdit: -99
}
},
methods: {
handleEdit(index, row, status) {
switch (status) {
case 0:
this.isEdit = index;
break;
case 1:
this.isEdit = -99;
break;
}
},
handleDelete(index, row) {
this.$confirm('这将会永久删除该⾏数据，是否继续?', '警告', {            confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(index, 1);
this.$message({
type: 'success',
message: '删除成功'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
appendNew(){
this.tableData.push({
date: '',
name: ''
});
this.isEdit = this.tableData.length - 1
},
tableRowClassName({row, rowIndex}){
row.index = rowIndex
}
}
}
</script>
<style>
html, body {
height: 100%;
}
</style>

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