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

//templete
<el-dialog
        title=" 编辑"
        :visible.sync="isShowEdit"
        width="60%"
        :close-on-click-modal="false"
        :before-close="handleCloseEdit"
        class="label">
    <el-table
            :data="tableDataEdit"
            style="width: 100%">
        <el-table-column
                type="index"
                label="序号"
                width="60">
        </el-table-column>
        <el-table-column
                key="brandName"
                prop="brandName"
                label="品牌">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.brandName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="zYellow"
                prop="zYellow"
                label="在途黄色提示">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.zYellow"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="zRed"
                prop="zRed"
                label="在途红色提示">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.zRed"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="cYellow"
                prop="cYellow"
                label="存放时间黄色提示">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.cYellow"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="cRed"
                prop="cRed"
                label="存放时间红色提示">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.cRed"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="cScale"
                prop="cScale"
                label="存放比例提示">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.cScale"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="sYellow"
                prop="sYellow"
                label="赎货周期黄色提示">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.sYellow"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="sRred"
                prop="sRred"
                label="赎货周期红色提示">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.sRred"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                key="num"
                prop="num"
                label="关联经销商数量">
            <template slot-scope="scope">
                <el-input :class="[scope.row.isEdit ? 'editInput' : '']" :readOnly="!scope.row.isEdit"
                          v-model="scope.row.num"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button style="display: inline-block" v-show="!scope.row.isEdit"
                           @click="handleEditLabel(scope.row)" type="text" size="small">编辑
                </el-button>
                <el-button style="display: inline-block" v-show="scope.row.isEdit"
                           @click="handleSaveLabel(scope.row)" type="text" size="small">保存
                </el-button>
                <el-button style="display: inline-block" v-show="scope.row.isEdit"
                           @click="scope.row.isEdit = false" type="text" size="small">取消
                </el-button>
                <el-button style="display: inline-block" v-show="!scope.row.isEdit"
                           @click="handleDelete(scope.row)" type="text" size="small">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="pagination">
        <span>第1/10页 共100条</span>
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next, jumper"
                :total="1000">
        </el-pagination>
    </div>
</el-dialog>

//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;
}