Vue3+ElementUI中的Table组件的使用
校验
表格内多个输入框校验
注意prop如何写。 实现:一旦输入框内部有更改,清空校验; 实现:自定义校验错误提示信息样式; 实现:在校验中获取该行数据;
< template> < el-table :data = " inputTableData" max-height = " 286" > < el-table-column type = " index" label = " #" align = " center" width = " 80" /> < el-table-column prop = " name" label = " 产品名称" align = " center" width = " 180" > < template #default = " scope" > < el-form-item :prop = " `${scope.$index}.name`" :rules = " inputTableRules(scope.row).name" > < el-input type = " text" v-model = " scope.row.name" @input = " clearValidateStatus(scope.$index, 0)" > </ el-input> < template v-slot: error= " { error }" > < el-tooltip effect = " light" :content = " error" placement = " top" > < el-icon class = " custom-error-tip" > < WarningFilled /> </ el-icon> </ el-tooltip> </ template> </ el-form-item> </ template> </ el-table-column> < el-table-column prop = " price" label = " price" align = " center" > < template #default = " scope" > < el-form-item :prop = " `${scope.$index}.price`" :rules = " inputTableRules(scope.row).price" > < el-input type = " text" v-model = " scope.row.L" @input = " clearValidateStatus(scope.$index, 1)" > </ el-input> < template v-slot: error= " { error }" > < el-tooltip effect = " light" :content = " error" placement = " top" > < el-icon class = " custom-error-tip" > < WarningFilled /> </ el-icon> </ el-tooltip> </ template> </ el-form-item> </ template> </ el-table-column> </ el-table>
</ template> < script lang = " ts" 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) ; }
}