直接贴代码
<template>
<el-table :data="tableData" border style="width: 90%;margin:0 auto" @row-dblclick="dbclick">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名" align="center">
<template slot-scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<el-input v-if="scope.row.isOK" v-model="scope.row.name"></el-input>
<span class="spspsp" v-else>{
{scope.row.name}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
<template slot-scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<el-input v-if="scope.row.isOK" v-model="scope.row.address"></el-input>
<span class="spspsp" v-else>{
{scope.row.address}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
isOK: true,
name: "张三",
address: "上海市普陀区金沙江路 1518 弄",
id: 1
},
{
date: "2016-05-02",
isOK: false,
name: "李四",
address: "上海市普陀区金沙江路 1518 弄",
id: 2
}
]
};
},
mounted() {},
methods: {
dbclick(row, event, column) {
console.log(row);
row.isOK = !row.isOK;
let obj = this.tableData.find(i => {
return i.id == row.id;
});
}
}
};
</script>
<style scoped>
</style>