控制隐藏el-table-column的一行?

clipboard.png

<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 = "显示"  
            }  
        }
        
       如何才能点击每行的隐藏按钮时,只隐藏当前行?现在是点击会隐藏全部行
阅读 10.4k
1 个回答

楼主,你好~
可以试试这个方法,
首先在你的 tableData1 数据里,每一项添加一个控制隐藏的状态,比如 item.isShow = true;
然后控制隐藏的时候,去控制这个状态就行。数据驱动的思想。

// 伪代码

toggle (index) {
    this.tableData1[index].isShow = !this.tableData1[index].isShow;
    if(this.tableData1[index].isShow){
        this.btnTxt = "隐藏"  
    }else{  
        this.btnTxt = "显示"  
    }  
}

如有帮助,麻烦点击下采纳,谢谢~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏