element中el-table中的el-input校验的实现

element中el-table中的el-input校验的实现

本文主要介绍了element中el-table中的el-input校验的实现,具体如下:

<el-form             :model="formParams"             :rules="rules"             ref="ruleForm"             label-width="0">             <el-tabs v-model="activeName" type="card" @tab-click="changeTab">               <el-tab-pane v-for="item in tabList" :name="item.name" :key="item.id">                 <div slot="label">                  {{item.name}}({{totalCount[item.name] || 0}})                 </div>                 <el-table                   v-show="activeName==='xxx'"                   :row-class-name="tableRowClass"                   :data="formParams.xxxData"                   border>                   <el-table-column                     min-width="10%"                     prop="num"                     label="数量">                     <template slot-scope="scope">                       <el-form-item :prop="'xxxData.' + scope.$index + '.num'" :rules="rules.num">                         <el-input v-model="scope.row.num"                                   maxlength="6"                                   @input="value => scope.row.num= Number(value.replace(/[^\d]/g,''))"                                   size="small"></el-input>                       </el-form-item>                     </template>                   </el-table-column>                   <el-table-column                     min-width="20%"                     label="时间">                     <template slot-scope="scope">                       <el-time-picker                         style="width: 45%"                         v-model="scope.row.startTime"                         value-format="HH:mm:ss"                         :picker-options="{                           selectableRange: '00:00:00 - 12:59:59'                         }"                         size="small"                         placeholder="开始时间">                       </el-time-picker> -                       <el-time-picker                         style="width: 45%"                         v-model="scope.row.endTime"                         value-format="HH:mm:ss"                         :picker-options="{                           selectableRange: `${scope.row.startTime ? scope.row.startTime : '00:00:00'}-12:59:59`,                         }"                         size="small"                         placeholder="结束时间">                       </el-time-picker>                     </template>                   </el-table-column>                   <el-table-column                     min-width="10%"                     label="操作">                     <template slot-scope="scope">                       <a  @click="delete(scope.$index)">删除</a>                     </template>                   </el-table-column>                 </el-table>               </el-tab-pane>             </el-tabs>           </el-form>

1. 点击保存的时候校验num

data() { return { num: [ { required: true, message: '请输入数量', trigger: 'change' }, ] } }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { return false; } }); } }

2. 由于每个tab页对应展示不同的数据列表,并且每个列表可以添加一条新的数据,如果想在保存时提示具体信息,如果"xxx的数量不能为空",“yyy的数量不能为空”,可以在点击保存时对不同的数据列表进行循环

this.validateNum(this.formParams.xxxData, 'xxx'); this.validateNum(this.formParams.yyyData, 'yyy'); validateNum(list, msg) {       if (list && list.length && list.findIndex(item => item.num === '') !== -1) {         this.tips.push(msg);       }     } if (this.tips.length) {         message += `${this.tips.join('、')}的数量不能为空;`;  }

3. 如果把<el-form>放在<el-tab>循环里面,在v-for循环中使用form表单验证this.$refs[formName].validate会出现错误TypeError: this.$refs[formName].validate is not a function:

由于this.$refs[formName]是一个数组,使用this.$refs[formName][0].validate((valid) => {}

4. time-picker中想要设置结束时间大于开始时间

selectableRange: `${scope.row.startTime ? scope.row.startTime : '00:00:00'}-12:59:59`

5. 给el-table中的指定行指定特殊的样式

tableRowClass(val) { if (val.row.type === 'xxxxxx') { return 'row-disable'; } else { return ''; } }

6. el-input中限制只能输入数字

<el-input v-model="count" @input="value => count = Number(value.replace(/[^\d]/g,''))" </el-input>

到此这篇关于element中el-table中的el-input校验的实现的文章就介绍到这了,更多相关el-table中的el-input校验内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    input设置高度|input输入框高度设置

    input设置高度|input输入框高度设置,,input输入框高度设置1、首先我们在PPT的工具中,找到文本框的按钮 2、点击文本框图标以后,选择文本的类

    table设置列宽|table 列宽

    table设置列宽|table 列宽,,table 列宽直接给每一列的第一行设置宽度就可以了,下边的默认与第一行的相同,如果需要修改,在单独设置就可以,下边

    table边框设置|table边框设置成双线

    table边框设置|table边框设置成双线,,1. table边框设置成双线点选表格,菜单--格式--边框和底纹,在线型中往下拉,你会看到双线,选择后确定就行

    lua的弱表(weak table)简介

    lua的弱表(weak table)简介,字符串,对象, 变量和值的区别变量是值的载体,变量消失,值却不一定消失objectTables, functions,

    antimalware service executable怎么关【关闭方法】

    antimalware service executable怎么关【关闭方法】,单击,设置,选择,下拉菜单,威胁,图标,  最近不少用户在使用电脑的时候发现自己的电脑非常

    索尼平板tablet s怎么刷机

    索尼平板tablet s怎么刷机,索尼,平板,索尼平板tablet s怎么刷机卡刷刷机方法:一、备份个人数据资料到电脑端或其他设备或云空间。二、将要

    Win10电脑开机提示“no bootable device”解决方法

    Win10电脑开机提示“no bootable device”解决方法,开机,设置,硬盘,提示,模式,解决方法,  近期,有win10用户碰到电脑无法开机,开机之后提示&ldq

    设置input只读|input只读属性怎么设置

    设置input只读|input只读属性怎么设置,,input只读属性怎么设置文档只读模式该成编辑模式方法如:1、点击文件右击选择“属性”;在“常规”选

    HTML中让表单input不可编辑的方法

    HTML中让表单input不可编辑的方法,方法,中国,表单,修改,字段,用户,  HTML中让表单input不可编辑的方法,有时候,我们希望表单中的文本框是只读的