element表格点击操作修改本行数据,这里需要使用到表格的row-class-name属性来操作
<template>
<el-table
:data="tableData"
:row-class-name="tableRowClassName"
style="width: 100%">
<el-table-column
fixed
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="province"
label="省份"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
<template slot-scope="scope">
<div v-if="scope.row.index==tableCli">
<el-input v-model="scope.row.id"></el-input>
</div>
<span v-else>{
{scope.row.zip}}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<div v-if="scope.row.index==tableCli">{
{showItem}}</div>
<el-button v-else @click="handleClick(scope.row,scope)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableCli:-1,
showItem:'',
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
},
methods:{
// 此方法用于区分是否点击的是当前行
tableRowClassName({row,rowIndex}){
row.index=rowIndex
},
handleClick(row,index){
console.log(index)
this.tableCli=index.$index
if(row){
this.showItem='你好'
}
}
}
}
</script>