el-input输入字母转化大写字母

最新推荐文章于 2023-12-08 16:59:49 发布

一方湖泊

最新推荐文章于 2023-12-08 16:59:49 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/wqkeep/article/details/122044610

Vue 专栏收录该内容

27 篇文章

订阅专栏

<template slot-scope="{disabled,size}" slot="shortcodeSearch">
   <el-input placeholder="助记符" :disabled="disabled" :clearable="true" :size="size" style="width:150px;" v-model.trim="shortCodeUpperCase"></el-input>
</template>



data(){
  return{
      inputVal:'',
  }
}
// 计算属性
computed: {
   shortCodeUpperCase: {
      get() {
        return this.inputVal;
      },
      set(val) {
        this.inputVal = val.toUpperCase();
        // 该input真正对应的字段：shortcode
        this.form.shortcode = this.inputVal
      },
    },
},
// 监视属性
watch: {
  'shortCodeUpperCase'() {
    // 搜索操作
    this.customSearch()
  }
},
methods: {
   onLoad(page, params = {}) {
     this.loading = true;
     getGoodsPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
       if (res.data.success) {
         const data = res.data.data;
         this.page.total = data.total;
         this.data = data.records;
         this.loading = false;
         this.selectionClear();
       }
     })
   },
 
   // 自定义搜索
   customSearch() {
     this.onLoad(this.page, this.form)
   },
   // 清空自定义搜索框
   customEmptySearch() {
     this.form.shortcode = ''
     this.shortCodeUpperCase = ''
   }
}