umy-ui虚拟表格中的表单验证

首先，umy版本需要更新到最新版，目前是1.1.4。

html模块：

ux-grid表格头部增加rule，:rules="rules"和自动聚焦:validConfig="{autoPos: true}"；

ux-table-column增加自动聚焦:edit-render="{autofocus: '.el-input__inner'}"；

rule跟element一样的写法，只是它只支持最简单的是否为空，其他验证条件需要自己扩展。

// 引入验证规则
import { numberRules} from '@/utils/rule'
export default {
    name: 'formula',
    data() {
        return {
            rules:{
                replaceFieldName: [
                   { required: true, message: '请选择输入流字段' }
                ],
                newFieldName: [
                   { required: true, message: '请填写输出流字段' }
                ],
                precision: [
                   { required: true, message: '请填写字段精度'},
                ],
                length: [
                   { required: true, validator: numberRules}
                ], 
        },

numberRules方法可以写在公共方法里，utils/rule.js，可以获取到一个对象，目前只用到里面的cellValue和column

// 验证是否数字
export function numberRules({ cellValue, column }) {
    const title = column.title;
    const number = cellValue.trim();
    if (!number) {
        return new Error('请填写'+title);
    } 
    else {
        if (!/(^[1-9]\d*$)/.test(number)){
            return new Error(title+'必须为数字');
        }
    }
}

提交方法使用validate(true)返回一个promise，如果有错误data不为空，返回错误信息。

        /**
         * 提交
         * */
        handleSuccess() {
            this.$refs.plxTable.validate(true).then( data => {
                if (data){
                    // 有错误
                }
                else {
                    // 验证通过
                }
            })

        },

错误提示是element的默认提示，会自动聚焦到当前验证不通过的框里