网站开发天津,网站建设项目组织图,wordpress按钮下拉,做网站用什么软件Vue3ElementUI中的Table组件的使用 校验表格内多个输入框校验 表格滚动到底部 校验
表格内多个输入框校验
注意prop如何写。实现#xff1a;一旦输入框内部有更改#xff0c;清空校验#xff1b;实现#xff1a;自定义校验错误提示信息样式#xff1b;实现#xff1a;在… Vue3ElementUI中的Table组件的使用 校验表格内多个输入框校验 表格滚动到底部 校验
表格内多个输入框校验
注意prop如何写。实现一旦输入框内部有更改清空校验实现自定义校验错误提示信息样式实现在校验中获取该行数据
templateel-table :datainputTableData max-height286el-table-column typeindex label# aligncenter width80 /el-table-column propname label产品名称 aligncenter width180template #defaultscopeel-form-item :prop${scope.$index}.name :rulesinputTableRules(scope.row).nameel-input typetext v-modelscope.row.name inputclearValidateStatus(scope.$index, 0)/el-inputtemplate v-slot:error{ error }el-tooltip effectlight :contenterror placementtopel-icon classcustom-error-tipWarningFilled //el-icon/el-tooltip/template/el-form-item/template/el-table-columnel-table-column propprice labelprice aligncentertemplate #defaultscopeel-form-item :prop${scope.$index}.price :rulesinputTableRules(scope.row).priceel-input typetext v-modelscope.row.L inputclearValidateStatus(scope.$index, 1)/el-inputtemplate v-slot:error{ error }el-tooltip effectlight :contenterror placementtopel-icon classcustom-error-tipWarningFilled //el-icon/el-tooltip/template/el-form-item/template/el-table-column/el-table
/templatescript langts setup
const inputTableRules (row) {return {name: [{ validator: validateInputTableName, rowData: row, trigger: [] }],L: [{ validator: validateNumber, rowData: row, trigger: [] }],A: [{ validator: validateNumber, rowData: row, trigger: [] }],B: [{ validator: validateNumber, rowData: row, trigger: [] }]}
}const clearValidateStatus (rowIndex, columnIndex) {let columnLength 4;let itemIndex rowIndex * columnLength columnIndexinputTableRuleFormRef.value.fields[itemIndex].clearValidate();
}
/script表格滚动到底部
// 表格滚动到底部
export const tableScrollToBottom (tableRef) {if (tableRef) {let maxHeight tableRef.layout.table.refs.bodyWrapper.firstElementChild.firstElementChild.firstElementChild.clientHeight;tableRef.setScrollTop(maxHeight);}
}
