项目场景:
el-table表格修改每列使用el-input对其做错误提示。
有时候需要在列表里面进行直接修改,并且有错误提示信息,如下图所示:
解决方案:
使用v-show="!scope.row.canEdit"
控制显示与隐藏,图标在element图标库去找,我用的自己公司的图标库里面的图标class="icon icon-bianji"
。错误信息提示:class="scope.row.showErr ? 'input-error' : ''"
,错误信息展示<span v-show="scope.row.canEdit && scope.row.errMsg" class="errmsg-style">{{ scope.row.errMsg }}</span>
。监听输入@blur="listenInput(scope.row)" @focus="listenInput(scope.row)"
。
<span
v-show="!scope.row.canEdit">
{{ scope.row.limitValue }}
</span>
<i
class="icon icon-bianji"
style="margin-left: 10px;"
v-show="!scope.row.canEdit"
slot="suffix"
@click="onEdit(scope.row)">
</i>
<el-input
slot="reference"
v-show="scope.row.canEdit"
:class="scope.row.showErr ? 'input-error' : ''"
size="small"
v-model="scope.row.limitValue"
@blur="listenInput(scope.row)"
@focus="listenInput(scope.row)"
style="width: 60%"
type="text">
</el-input>
<i class="icon icon-chenggong" v-show="scope.row.canEdit" style="color: #02b212; margin-left: 5px;" @click="onSave(scope.row)"></i>
<i class="icon icon-shibai" v-show="scope.row.canEdit" style="color: #e6a23c; margin-left: 5px;" @click="cancleEdit(scope.row)"></i><br />
<span v-show="scope.row.canEdit && scope.row.errMsg" class="errmsg-style">{{ scope.row.errMsg }}</span>
数据获取成功后,将数据添加三个字段:
// 数据获取成功
dataLoadSuccess(res) {
let data = JSON.parse(JSON.stringify(res.data.res));
data.forEach(item => {
item.canEdit = false; //是否编辑
item.showErr = false; //是否显示错误提示
item.errMsg = ''; //错误提示信息
});
},
监听输入:
// 监听输入
listenInput(row) {
if (!row.limitValue) {
row.errMsg = '请输入配额数';
row.showErr = true;
}
let reg = /^\d{1,10}$/;
if (!reg.test(row.limitValue)) {
row.errMsg = '请输入正确的配额数';
row.showErr = true;
} else if (
row.limitValue < this.form.usedValue &&
this.form.isUsedDisplay
) {
row.errMsg = '总配额不可小于已用配额';
row.showErr = true;
} else {
row.errMsg = '';
row.showErr = false;
}
},
点击编辑:
onEdit(row) {
row.canEdit = true;
},
保存按钮:
// 保存修改,有错误不可以保存
onSave(row) {
if (row.showErr || row.errMsg) {
return;
}
.....
取消按钮:
//取消编辑
cancleEdit(row) {
row.canEdit = false;
row.errMsg = '';
row.showErr = false;
},
错误提示样式:
.input-error /deep/ .el-input__inner {
border: 1px solid red;
}
.errmsg-style {
color: red;
}