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