vue通过样式实现可编辑单元格

//templete

    
        
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
    

    

        第1/10页 共100条
        
        
    

//js

// 点击编辑标签管理信息
handleEditLabel(row) {

    if (this.currentList) {

        if (this.currentList.isEdit) return this.$message.warning("请先保存当前编辑项");

    }

    row.isEdit = true
    this.currentList = row


},
// 保存信息
handleSaveLabel(row) {
    let _t = this
    console.log(row)
    row.isEdit = false
    axios.put('/updatePro', row)
        .then(
            res => {
                console.log(res);
                if (res.status == 200 && res.data.code == 100000) {

                    _t.$message(res.data.message);

                }

            }
        )
},

//css

/* 提示参数弹框样式开始 */
.edit .el-dialog__body {
   padding: 5px 34px 0 20px !important;
}
.edit .el-form-item {
   margin: 25px 0 0!important;
}
.edit .dealerName  .el-form-item{
   float: left !important;
}
.edit .el-form-item__label {
   width: 96px;
   text-align: left;
}
.edit .el-input__inner {
   background: transparent !important;
}
.edit .el-tag {
   width: 90px;
   height: 24px !important;
   line-height: 24px !important;
   color: #42DBFE;
   background: rgba(66,219,254,0.40) !important;
   border: 1px solid #389CBB;
   border-radius: 2px;
   text-align: center;
}
.edit .el-select .el-tag__close.el-icon-close {
   background: transparent !important;
   color: #389CBB !important;
}
.label .el-table .el-input__inner {
   width: 100% !important;
   text-align: center;
   background: transparent !important;
}
.label .editInput .el-input__inner {
   background: #293E56 !important;
}
.label tr:nth-child(even) .editInput .el-input__inner {
   background: #1C3044 !important;
}