Control the line that hides the 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 = ""  
            }  
        }
        
       

landlord, hello ~
you can try this method.
first of all, in your tableData1 data, add a hidden state to each item, such as item.isShow = true ;
then control the hidden state. data-driven thinking.

// 

toggle (index) {
    this.tableData1[index].isShow = !this.tableData1[index].isShow;
    if(this.tableData1[index].isShow){
        this.btnTxt = ""  
    }else{  
        this.btnTxt = ""  
    }  
}
< hr >

if it is helpful, please click to adopt it, thank you ~

Menu