方法一:跟後臺配合,接收到的數據裏有一個字段(istrue)來控制是否顯示。
方法二:通過element ui的css去控制(highlight-current-row官方示例中,使用它進行某一行選中時的背景高亮)
參考地址:https://www.jianshu.com/p/79f39f2c1382
注:這個方法有一個缺點就是,只要你點這組數據的某一行,它就變成input框可修改了。修改按鈕就沒有用了,而且,哪怕你點擊刪除按鈕,依然會變成修改狀態。
方法三:通過this.$set的方式,加一個屬性就可以了。
<template>
<div>
<el-table :data="tableData" tooltip-effect="dark" style="width: 100%" header-align="center">
<el-table-column width="50" header-align="center">
<template slot-scope="{row,$index}">
<span>{{$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="名稱" prop="name" width="300" header-align="center">
<template slot-scope="{row,$index}">
<input class="edit-cell" v-if="isshow[$index]" v-model="row.name">
<span v-if="!isshow[$index]">{{row.name}}</span>
</template>
</el-table-column>
<el-table-column label="日期" prop="date" width="300" header-align="center">
</el-table-column>
<el-table-column label="日期" prop="date" width="300" header-align="center">
</el-table-column>
<el-table-column label="地址" prop="address" width="300" header-align="center">
</el-table-column>
<el-table-column label="地址" prop="address" width="300" header-align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100" header-align="center">
<template slot-scope="{row,$index}">
<el-button type="text" size="small" @click.native="handelCancel($index, row)" v-if="isshow[$index]">確定
</el-button>
<el-button type="text" size="small" @click.native="handleEdit($index, row)" v-if="!isshow[$index]">編輯
</el-button>
<el-button type="text" size="small" @click.native="handleDelete($index, row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
isshow: [],
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}]
};
},
methods: {
//點擊編輯
handleEdit(index, row) {
this.$set(this.isshow, index, true)
},
//取消編輯
handelCancel(index, row) {
this.$set(this.isshow, index, false)
},
//點擊更新
handleUpdate(formName) {
},
//點擊刪除
handleDelete(index, row) {
},
},
mounted() {
}
};
</script>
<style scoped>
</style>