Element UI version
2.13.2
OS/Browsers version
windows 10 / chrome 83.0.4103.61
Vue version
2.6.11
Reproduction Link
https://codepen.io/frank-we/pen/BajaQyV
Steps to reproduce
1、按需引入elementUi组件，并对el-tabel进行二次封装成WTable，构建为独立Ui库；
2、引入第三方项目中使用，发现WTable无法正常渲染数据；
3、全部引入整个elementUi后再构建成库，第三方项目使用则一切正确。
4、第三方项目也按需引入了elementUi，版本一致。
5、重现链接为第三方项目中引入二次封装库的使用代码，封装仅对样式进行风格统一和加入el-pagination。
What is Expected?
按需引入elementUi，封装后在第三方库能正确渲染表格数据
What is actually happening?
el-table封装后在第三方项目使用中无法正常渲染数据。
经查看源码，发现 table-header.js 、 table-body.js 等等文件中的 mapStates 部分，无法响应获取 data、columns等数据，导致表格没有正确渲染。
7条答案
按热度按时间huwehgph1#
我也碰到了这种问题 请问您这边解决了么
lokaqttq2#
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
gojuced73#
同问
ocebsuys4#
@frank-we 你解决这个问题了吗
i2loujxw5#
解决方案：项目中和第三方库只能存在一个vue，第三方库打包时必须得排除掉vue。
webpack可加以下属性排除打包
externals = {
vue: 'Vue'
};
42fyovps6#
解决方案：项目中和第三方库只能存在一个vue，第三方库打包时必须得排除掉vue。 webpack可加以下属性排除打包 externals = { vue: 'Vue' };
造成这个问题的原因如下：
1.table组件有一个store进行数据维护，store是一个vue实例，table组件的数据等信息都会记录到这个store中去，当store数据发生变化时驱动视图变化。
2.Vue的依赖收集收集的只能是watcher，计算属性，渲染函数，watch函数等都是watcher。当我们的watcher执行前，会先把自己指向Dep.target。然后store的属性被使用时，它getter函数就会被触发进行watcher收集，但是收集前会先判断Dep.target 是否存在，存在则把Dep.target放入依赖里。
3.所以项目中的Vue和store的Vue不是同一个时 ，就会存在table组件的watcher指向的Dep和store的getter函数进行判断的Dep不是同一个。进而导致store的数据变化了，但是table的计算watcher，渲染watcher不会被通知执行。因为根本就没有被收集。
mm5n2pyu7#
一模一样的问题，但是加了externals属性好像没有用