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