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

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

html模块：

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

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

<ux-grid border
     show-overflow
     ref="plxTable"
     keep-source 
     :rules="rules" 
     :height="tableHeight"
     :validConfig="{autoPos: true}"
     @selection-change="handleSelsct"
     :highlightCurrentRow="false"
     :edit-config="{trigger: 'click', mode: 'cell'}"
     @cell-click="handlecellClick"
>
    <ux-table-column field="length" width="100" title="长度"  :edit-render="{autofocus: '.el-input__inner'}">
        <template v-slot:edit="scope">
             <el-input ref="selectInput" v-model="scope.row.length" placeholder="请输入"></el-input> 
        </template>
        <template v-slot="{ row }">
             <div class="el-input"><div class="el-input__inner" :class="row.length!=''?'':'b-placeholder'">{{row.length!=''?row.length:'请输入'}}</div></div>
        </template>
    </ux-table-column>
</ux-grid>

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的默认提示，会自动聚焦到当前验证不通过的框里