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

项目场景:

项目中使用Element-ui 中 el-input 输入框显示:输入字数以及限制输入字数
Element-ui 中 el-input 输入框显示:输入字数以及限制输入字数_第1张图片


解决方案:

方法一:

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

Element-ui 中 el-input 输入框显示:输入字数以及限制输入字数_第2张图片

方法二:

低版本的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>

Element-ui 中 el-input 输入框显示:输入字数以及限制输入字数_第3张图片

你可能感兴趣的:(element-ui,vue.js,elementui,前端)