[Component] [table-column, table] el-table-column使用prop展示数据在chrome72下不显示内容

[yoomin1106]

Bug Type: Component

Environment

• Vue Version: 3.2.45
• Element Plus Version: 2.2.25
• Browser / OS: 72.0.3626.96（正式版本） （64 位）
• Build Tool: Vite

Reproduction

Related Component

• el-table-column
• el-table

Reproduction Link

Github Repo

Steps to reproduce

vite使用了 @vitejs/plugin-legacy 插件，配置如下：

legacy({
    targets: ['chrome >= 64', 'ie >= 11'],
    additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all'
    ],
    modernPolyfills: true
})

el-table-column使用prop不显示单元格内容，用template则可以，代码如下：

<el-table-column
    prop="name"
    label="名称"
    width="180px"
>
    <template #default="scope">{{
        scope.row.name || '-'
    }}</template>
</el-table-column>
<el-table-column
    prop="displayname"
    label="显示名"
    width="180px"
></el-table-column>

上面的代码，“名称”会显示，“显示名”不显示，内容空白，div.cell 的DOM也未渲染。

环境版本：
dependencies:
element-plus 2.2.25
vue 3.2.45

devDependencies:
@vitejs/plugin-legacy 2.3.1
terser 5.16.5
vite 3.2.4

What is Expected?

显示列的内容

What is actually happening?

一片空白

Additional comments

(empty)

[guobaorou-man]

chrome73 同样遇到此问题，build target 设置为 'es2015'。打包版本则能正常显示数据。问题似乎出现在低版本浏览器处理展开预算符时有差异。
我的测试结果是：
如果遍历数组中每一项直接展开，只有第一项会正确展开，后续都会返回 {}

for (let i = 0; i < arr.length; i++) {
    const item = { ...arr[i] }
    ..............
}

如果加入空对象合并，则每一项都正确展开

for (let i = 0; i < arr.length; i++) {
    const item = { ...{}, ...arr[i] }
    ..............
}

[fooooxxxx]

我试了一下，感觉是 Chrome 73 以及更低版本 使用对 Proxy对 使用展开语法导致的bug,并不是 Element Plus 或者 Vite 的问题

复现过程

把下面代码分别复制到 Chrome 73 和 Chrome 114 的控制台执行就能发现差异

const createP = (obj ) => {
    return new Proxy(obj, {
        get(target, prop, receiver) {console.log(`Getting property ${String(prop)}`); return Reflect.get(target, prop, receiver)},
        ownKeys(target) {console.log('Calling ownKeys'); return Reflect.ownKeys(target)}
    })
}
const rawArr = [{ realWidth: 200 }, { realWidth: 300 }, { realWidth: 400 }]
const pArr = rawArr.map((item) => createP(item))
pArr.forEach((i) => {// 这里使用 map 也能复现
    const copy = { ...i }
    console.log(JSON.stringify(copy))
})

Chrome 73 打印出来的

Calling ownKeys
Getting property realWidth
{realWidth: 200}
{}
{}

符合预期的 Chrome 114 打印出来的

Calling ownKeys
Getting property realWidth
{realWidth: 200}
Calling ownKeys
Getting property realWidth
{realWidth: 300}
Calling ownKeys
Getting property realWidth
{realWidth: 400}

可以看出来 Chrome 73 版本没有正确的使用{...obj}复制对象

尝试修复

vite.config.ts 的 build.target 改为 es2015 能解决问题是因为 esbuild 构建时把 ... 展开语法替换成其他方式实现了
但是我还需要 polyfills 来解决一些其他版本浏览器的兼容问题,于是用了 vite-plugin-legacy 来帮助转换和自动添加polyfills,毫无疑问是不行的,因为 Chrome 73 实际上是支持展开语法的,vite-plugin-legacy 并不会帮你转换.

#10640 我试了一下这个 PR 的修改,可以避开 Chrome 73 以及更早版本的 展开语法的bug

我不是专业的前端,但是根据 AI 的回答,觉得可以通过配置 babel 之类的方法强制转换 ... 展开语法