前言
我这边表格
一、表格校验
1、表格验证
前提:我这边qty这一列表格使用的是拥有编辑功能
<s-table ref="multipleVenMaterTable" border resizable show-overflow height="300" :data="venMaterData" :edit-rules="validRules" :edit-config="{trigger: 'dblclick', mode: 'row'}" @selection-change="handleSelectionVenMaterChange" >
<s-table-column type="checkbox" width="60" />
<s-table-column :label="$t('wms.receipt.materialNum')" field="materialNum" />
<s-table-column :label="$t('wms.receipt.materialName')" field="materialName" />
<s-table-column :label="$t('wms.receipt.unit')" field="unit" />
<s-table-column :label="$t('wms.receipt.qty')" field="qty" :rules="threeFormRules.factory" :edit-render="{name: 'input'}" />
</s-table>
// data数据
validRules: {
qty: [
{ required: true, message: '名称必须填写' }
]
}
// 事件
threeVenMaterConmmit() {
// 获取选中行数
const selectRecords = this.$refs.multipleVenMaterTable.selection
if (selectRecords.length > 0) {
this.$refs.multipleVenMaterTable.validate(selectRecords, valid => {
if (valid) {
this.$XModal.message({ status: 'success', message: '校验成功!' })
} else {
this.$XModal.message({ status: 'error', message: '校验不通过!' })
}
})
} else {
this.$XModal.message({ status: 'warning', message: '未选中数据!' })
}
}
二、勾选el-table几条数据迁移到另一个el-table
<s-table
ref="multipleVenMaterTable" border resizable show-overflow height="300" :data="venMaterData" :edit-config="{trigger: 'dblclick', mode: 'row'}" @selection-change="handleSelectionVenMaterChange" >
<s-table-column type="checkbox" width="60" />
<s-table-column :label="$t('wms.receipt.materialNum')" field="materialNum" />
<s-table-column :label="$t('wms.receipt.unit')" field="unit" />
<s-table-column :label="$t('wms.receipt.qty')" field="qty" :edit-render="{name: 'input'}" />
</s-table>
<!-- 上面edit-config是我们自己的双击输入一个功能,大家忽视,这里有一个checkbox勾选 -->
data数据
enMatervalidRules: {
qty: [
{ required: true, message: '可收数量必须填写', trigger: 'change' }
]
}
方法
threeVenMaterConmmit() {
const selectRecords = this.$refs.multipleVenMaterTable.selection
this.$refs.multipleVenMaterTable.validate(selectRecords, valid => {
if (valid) {
this.$XModal.message({ status: 'success', message: '校验通过!' })
} else {
this.$XModal.message({ status: 'error', message: '校验不通过!' })
}
})
}
三、表单校验
1、校验表单必填
<el-form ref="threeForm" class="stepThreeDiv" :rules="threeFormRules" :inline="true" :model="searchForm">
<el-form-item :label=" $t('wms.receipt.factoryCode') " prop="factoryCode" :rules="threeFormRules.factory" >
<el-select v-model="searchForm.factoryCode" clearable filterable :placeholder="$t('common.select')" @focus="getFactoryName" >
<el-option label="ALL" value="" />
<el-option v-for="item in factoryCodes" :key="item.factoryCode" :label="item.factoryName"
:value="item.factoryCode" />
</el-select>
</el-form-item>
</el-form>
// data数据源:
searchFormRules: {
createUsers: [{ required: true, message: 'createUser不能为空', trigger: 'blur' }]
}
// 事件
this.$refs.threeForm.validate(valid => {
if (valid) {
console.log('通过')
console.log(this.form.tableData)
}
})
2、正则校验
rules: {
appActiveUserNum: [{
trigger: 'blur',
message: '输入不正规,输入不正规,最多9位数字,最多2位小数',
pattern: /^([1-9]\d{0,8})([.]\d{1,2})?$|^0[.]([1-9]\d{0,1}|[0-9][1-9])$/
}]
}
3、自定义方法校验
rules: {
numValue: [{ trigger: 'blur', validator: validateFloatNum }]
},
export const validateFloatNum = (rule, value, callback) => {
let reg = /^([0-9]\d{0,8})([.]\d{1,7})?$|^0[.]([0-9]\d{0,1}|[0-9][0-9])$/
if (!reg.test(value)) {
callback(new Error('输入不正规,最多9位数字,最多7位小数'))
} else {
callback()
}
}