<el-table :data="tableData1" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
<div style='display: inline-block; width: 500px; height: 100px' v-if="isShow">
<el-table-column label="日期" width="100">
<template scope="scope">
<el-input size="small" v-model="scope.row.date" placeholder="请输入日期" @change="handleEdit1(scope.$index, scope.row)"></el-input>
<span>{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="100">
<template scope="scope">
<el-input size="small" v-model="scope.row.name" placeholder="请输入姓名" @change="handleEdit1(scope.$index, scope.row)"></el-input>
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址" width="300">
<template scope="scope">
<el-input size="small" v-model="scope.row.address" placeholder="请输入地址" @change="handleEdit1(scope.$index, scope.row)"></el-input>
<span>{{scope.row.address}}</span>
</template>
</el-table-column>
</div>
<el-table-column label="操作" width="300">
<template scope="scope">
<el-button size="small" type="primary" @click="toggle()">{{btnTxt}}</el-button>
<el-button size="small" type="danger" @click="handleDelete1(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
isShow: true,
toggle () {
this.isShow = !this.isShow;
if(this.isShow){
this.btnTxt = "隐藏"
}else{
this.btnTxt = "显示"
}
}
如何才能点击每行的隐藏按钮时,只隐藏当前行?现在是点击会隐藏全部行
楼主,你好~
可以试试这个方法,
首先在你的
tableData1
数据里,每一项添加一个控制隐藏的状态,比如item.isShow = true
;然后控制隐藏的时候,去控制这个状态就行。数据驱动的思想。
如有帮助,麻烦点击下采纳,谢谢~