Element-ui 中 el-input 输入框显示:输入字数以及限制输入字数

项目场景:

项目中使用Element-ui 中 el-input 输入框显示:输入字数以及限制输入字数
在这里插入图片描述


解决方案:

方法一:

高版本的element-ui支持通过设置:show-word-limit属性来展示字数统计:

在这里插入图片描述

方法二:

低版本的element-ui不支持show-word-limit属性,可以通过如下方法实现:

          <el-form-item
            label="项目名称:"
            prop="name"
            class="quantity-limit">
            <el-input v-model="sheetMsg.name" :disabled="isEdit" maxlength="64" placeholder="请输入"></el-input>
            <span style="position: absolute; right: 116px; bottom: 0;">{{ sheetMsg.name ? sheetMsg.name.length : 0 }}/64</span>
          </el-form-item>

在这里插入图片描述


版权声明:本文为migexiaoliang原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。