关于Vue中input输入框大小写自动转换的需求

一、需求

对表格中的输入框添加输入限制：

1. 只能输入4位大写字母+7位数字
2. 输入的小写字母自动转化为大写字母输入

二、实现

1、对于第一个需求直接使用正则即可，代码如下：

[{ required: false, message: '请输入', tigger: ['blur','change'] },
 {
     pattern: /^[A-Z]{4}[0-9]{7}$/,
     message: "支持4位大写字母+7位数字",
     trigger: "blur"
 }]

2、对于第二个需求有多解：

法一：@input="value=>scope.row.containerCode=value.toUpperCase()"

不管你是插槽式写法还是其他写法都可以（中英文输入都不影响），亲测好用

<el-table-column prop="containerCode" label="集装箱号" 
    align="center" header-align="center" width="150">
        <template slot-scope="scope">
            <el-form-item
            label-width="0%"
            :prop="`list[${scope.$index}].containerCode`"
            :rules="[{ required: false, message: '请输入', tigger: ['blur','change'] },
                  {
                    pattern: /^[A-Z]{4}[0-9]{7}$/,
                    message: "支持4位大写字母+7位数字",
                    trigger: "blur"
                  }]"
            >
                <el-input v-model.trim="scope.row.containerCode"  size="mini" @input="value=>scope.row.containerCode=value.toUpperCase()" :disabled="scope.row.status=='InfoVerified'" clearable></el-input>
            </el-form-item>
        </template>
 </el-table-column>

法2~4：参考这篇文章，写的挺详细就不赘述了~

标签：Vue,value,大写字母,输入框,input,scope,输入,row
来源： https://www.cnblogs.com/xmt08042/p/16395957.html