Element UI el-input组件show-word-limit属性不生效，字数统计未显示

嗨，咱们来看看为啥你的el-input文本域的字数统计没显示出来！我之前也碰到过类似情况，大概率是这几个原因，咱们一步步排查：

1. 检查Element UI版本是否支持该功能 #

show-word-limit对textarea类型的支持是从Element UI 2.3.0版本才开始的，如果你的项目用的是更早的版本，这个功能压根没实现。

你可以在项目根目录运行命令查看当前版本：

npm list element-ui
# 用yarn的话就运行这个
yarn list element-ui

如果版本低于2.3.0，建议升级到最新的2.x稳定版（比如2.15.13），升级命令：

npm update element-ui --save
# 或者
yarn upgrade element-ui

2. 排查自定义样式是否覆盖了统计元素 #

有时候项目里的全局样式或组件自定义样式会不小心把字数统计的元素隐藏掉。你可以按F12打开浏览器开发者工具，找到textarea对应的DOM节点：

• 如果找不到.el-input__count这个元素，那大概率是版本或组件引入的问题；
• 如果找到了，但它的display被设为none、opacity为0，那就是样式被覆盖了，需要修改自定义样式恢复它的显示。

3. 确认Element UI样式是否正确引入 #

如果你是按需引入Element UI，一定要记得同时引入Input组件的对应样式，不然组件的默认样式（包括字数统计的样式）不会加载：

// main.js 示例代码
import Vue from 'vue';
import { Input } from 'element-ui';
import 'element-ui/lib/theme-chalk/input.css'; // 这行必须加！

Vue.use(Input);

如果是全局引入，确保已经引入了完整的Element UI样式：

// main.js 示例代码
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 完整样式文件

Vue.use(ElementUI);

极简测试示例 #

你可以先试试这个极简示例，排除项目其他代码的干扰，看能不能正常显示字数统计：

<template>
  <div>
    <el-input 
      type="textarea" 
      placeholder="Please input" 
      v-model="textarea" 
      maxlength="30" 
      show-word-limit
      rows="3"
    ></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: ''
    };
  }
};
</script>

按上面的步骤排查，应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者Abhishek Matta