<template slot-scope="scope">
<div>
<el-button type="success" @click="addData">添加数据</el-button>
<el-button type="success" @click="submitData">提交</el-button>
<el-divider></el-divider>
<el-table :data="tableData" border stripe style="width: 100%;">
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="sex" label="性别">
<template slot-scope="scope">
<el-select v-if="scope.row.edit" v-model="scope.row.sex" placeholder="请选择">
<el-option label="男" value="1">男</el-option>
<el-option label="女" value="2">女</el-option>
</el-select>
<span v-else>
<p v-if="scope.row.sex == 1">男</p>
<p v-if="scope.row.sex == 2">女</p>
</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row)">
<i class="el-icon-check" aria-hidden="true">保存</i>
</el-button>
<div v-else>
<el-button type="text" size="medium" @click="editData(scope.row)">
<i class="el-icon-edit" aria-hidden="true">编辑</i>
</el-button>
<el-button type="text" size="medium" @click="deleteData(scope.row, scope.$index)">
<i class="el-icon-delete" aria-hidden="true">删除</i>
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Demo',
data() {
return {
tableData: [],
}
},
methods: {
//添加
addData() {
this.tableData.push({
edit: true,
})
},
//确认添加
confirmAdd(row) {
row.edit = false
},
//修改
editData(row) {
row.edit = true
},
//删除
deleteData(row, index) {
this.tableData.splice(index, 1)
},
submitData() {
alert(JSON.stringify(this.tableData))
},
},
}
</script>
<style lang="scss" scoped></style>
vue实现表格行内编辑
最新推荐文章于 2024-07-04 19:32:13 发布