最近项目中有需要在table中放入input 实现增、删、查、改。写了个简单的小demo记录一下。
<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>
<el-button type="text" @click="addData">添加数据</el-button>
<el-divider></el-divider>
<el-button @click="submitData">提交 </el-button>
js部分
<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>
效果图