[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“

使用vue+ant-design-vue时报错:
[Vue warn]: Error in render: “TypeError: renderEmpty is not a function”

这个问题很奇怪吧,反正基本上百度甚至google都查不到这个错误。而且有意思的是,全量引入ant-design-vue,是没有这个问题的,启用按需涌入ant-design-vue的Select组件,就会报这个错误。

没办法,只能自己折腾。

首先我们点开报错的index.js。就是报错地方的getNotFoundContent 后面的index.js

[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“_第1张图片
点进去,看到代码如下:
[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“_第2张图片
我们发现renderEmpty 这个函数是传递进来的。这里好像也看不出啥,要不去看看源码?

从项目里面点进ant-design-vue 的lib里面,找到打包后的select文件
[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“_第3张图片
[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“_第4张图片
在index.js里面搜索 renderEmpty ,查找代码
[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“_第5张图片
[Vue warn]: Error in render: “TypeError: renderEmpty is not a function“_第6张图片
从上面源码我们已经看出了问题,之所以报错,是因为这句:var renderEmpty = this.configProvider.renderEmpty;,也就是configProvider这个东西里面没有renderEmpty。

那获取大家就已经恍然大悟了,ant-desgign-vue需要引入语言包。那么解决方案也很简单了,类似下面即可

<template>
  <a-config-provider :locale="zhCN" :autoInsertSpaceInButton="false">
    <div>
      <router-view/>
    div>
  a-config-provider>
template>
<script>
import zhCN from "ant-design-vue/es/locale/zh_CN"
export default {
  data() {
    return {
      zhCN
    }
  }
}
script>

你可能感兴趣的:(vue.js,javascript,前端)