[Build] [table, table-column] 使用vite 打包前

[ksmarsh]

Bug Type: Build

Environment

• Vue Version: 3.2.37
• Element Plus Version: 2.2.9
• Browser / OS: Chrome/103.0.0.0
• Build Tool: Vite

Reproduction

Related Component

• el-table
• el-table-column

Reproduction Link

Element Plus Playground

Steps to reproduce

大概是这么个样子
展示表格数据
第三项没有字段
表格不展示

const list = ref([
{name:'张三',age:12,height:143,weight:80,other:{
address:'北京西城'
}},
{name:'李四',age:22,height:173,weight:140,other:{
address:'上海浦东'
}},
{name:'王二',age:23,height:163,weight:120,other:{}},
])

{{row.other.address}}

What is Expected?

正常显示 没有值就为空

What is actually happening?

在开发中期望行为，在使用vite打包后 偶尔 会出现报错
cannot read properties of null (reading 'insertBefore') 或者 单个字母 t is not a function等报错 这种我网上查是 绑定的数据没有值 el-talbe中 虚拟DOM 相关的提示的报错

Additional comments

目前我大概了解了问题产生的原因 解决办法是在渲染DOM前先判断是否有值来避免产生这种问题。
我有几点需求：
1.这个问题是开发者产生的，能否有方法避免它，在开发环境下
2.我不清楚是否是有配置来检查错误，如果有，请给我介绍，感谢。
3.如果已经有解决的办法，也请告诉我，我并不是很精通vue和element-plus。

[chenxch]

由于template中无法直接使用可选链，你可以构建一个getAddress的函数去返回address，例如

// script
function getAddress(row){
 return row?.other?.address || ''
}
//template
{{ getAddress(row) }}

[ksmarsh]

感谢你的回复和解答，我会尝试使用这种方法

[Yi-Z0]

这个应该是 element plus 的bug , scope.row 在初始化的时候, 它的值可能是一个 空对象 {} , 在线上可能就会导致这个问题
这里有一个 在线实例, 其中的 console.log(row,JSON.JSON.stringify(row)) 可以证明这一点.
最后我使用的解决方案是 ,可能可以解决这个问题:

<template #default="scope">
    <div v-if="Object.keys(scope.row).length>0">
       {{scope.row.date}}
    </div>
</template>

[gjfei]

由于template中无法直接使用可选链，你可以构建一个getAddress的函数去返回address，例如

// script
function getAddress(row){
 return row?.other?.address || ''
}
//template
{{ getAddress(row) }}

template 中是可以用的