标签：__ el style 单元格 cell item important input table
<el-table v-loading="loading" :data="npitestrecordList" border @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave">
<el-table-column label="温度（°C）" align="left" prop="temper" show-overflow-tooltip width="125px">
<div class="item" slot-scope="scope">
<el-input
@blur="changeTemper(scope.row)"
maxlength="9"
class="item__input"
v-model="scope.row.temper"
placeholder="请输入温度（°C）"
></el-input>
<div class="item__txt">{{ scope.row.temper }}</div>
</div>
</el-table-column>
</el-table>
data：这个数组代表的是移入哪个单元格有效果
editProp: [
"temper"
],
methods：
/** 鼠标移入cell */
handleCellEnter(row, column, cell, event) {
const property = column.property;
if(this.editProp.includes(property)）{
cell.querySelector(".item__input").style.opacity = "1";
cell.querySelector(".item__input").style.width = "200px";
cell.querySelector(".item__input").style.height = "30px";
cell.querySelector(".item__input").style.display = "block";
cell.querySelector(".item__txt").style.display = "none";
}
},
/** 鼠标移出cell */
handleCellLeave(row, column, cell, event) {
const property = column.property;
if (this.editProp.includes(property)) {
cell.querySelector(".item__input").style.display = "none";
cell.querySelector(".item__txt").style.display = "block";
}
},
//更新数据
changeTemper(row){
// 只允许输入正整数或小数
const regex = /^[+]?(?!0\d)\d*(\.\d+)?$/;
if (!regex.test(row.temper)) {
// this.npitestrecordList[this.clickRowIndex].temperature = value.replace(/[^\d]/g, '');
this.msgError("湿度只允许输入正整数或小数，请重新输入");
return
}
//更新数据
let form = {
id: row.id,
temper: row.temper
}
updateNpitestrecord(form).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
// this.getList();
}
});
},
style：
<style lang='scss' scoped="scoped">
.item {
.input_padding {
padding-left: 0px !important;
}
.el-input__inner {
color: #000000 !important;
height: 14px !important;
border-radius: 0px !important;
border-bottom: 1px solid #000000 !important;
border-top: 0px;
border-left: 0px;
border-right: 0px;
background-color: #ffffff !important;
}
.item__txt {
box-sizing: border-box;
border: 1px solid transparent;
width: 100px;
line-height: 24px;
padding: 0 8px;
}
.item__txt--hover {
border: 1px solid #dddddd;
border-radius: 4px;
cursor: text;
}
.el-input--mini {
font-size: 13px !important;
}
i {
font-size: 13px !important;
line-height: 13px !important;
}
.item__input {
display: none;
width: 100px;
}
}
.select_item{
// element.style {
// width: 520px !important;
// }
div{
width:840px !important;
}
}
</style>
标签：__,
el,
style,
单元格,
cell,
item,
important,
input,
table
From： https://www.cnblogs.com/cw828/p/17719032.html