Vue.js 使用插槽范围问题的元素UI表列；无法读取属性'；列名称'；“未定义”的定义；

这里有人使用元素ui框架吗

我正在使用它的表组件，并在它的列上使用插槽范围。在我运行npm更新之前，它工作得很好，当然，npm更新会更新软件包。现在，控制台有很多错误。后来我发现表列的这个插槽范围导致了这个问题

任何帮助都将不胜感激。这是一个棘手的问题

{{scope.row.first_name}
数据（）{
返回{
输入：“”，
名单：[
{
名字：“Foo”，
姓氏：“酒吧”
}
]
}
},

由于第一次渲染时值

scope

为空对象，因此引发错误。这意味着对象行是未定义的，它抛出的是一个。您必须检查

行

值是否已定义，然后才能访问它。您还可以使用它们的替代形式将值绑定到列。这取决于您的用例

<el-table :data="list">
  <el-table-column prop="first_name" label="First Name"> </el-table-column>
  <el-table-column prop="last_name" label="Last Name"> </el-table-column>
</el-table>

---

出现此问题的原因是Vue中的新插槽语法。 更多信息请访问

带文本的默认插槽

<!-- old -->
<foo>
    <template slot-scope="scope">
        {{ scope}}
    </template>
</foo>

<!-- new -->
<foo v-slot="scope">
    {{ scope}}
</foo>

{{scope}}
{{scope}}

另一个使用UI元素的Table组件的示例

注意：将Vue升级至最新版本，目前为2.6.3

<el-table :data="list">
    <el-table-column label="First Name" v-slot="scope">
        {{ scope.row.first_name }}
    </el-table-column>
    <el-table-column prop="last_name" label="Last Name">
    </el-table-column>
</el-table>

{{scope.row.first_name}

问题已解决Vue@2.6.3

它是vuejs更新还是元素ui更新的一部分？因为以前一切都很好。他们的文档中也有这个插槽作用域示例，我必须在单元格中添加一些使用内部数据的内容，这就是为什么我需要这个插槽作用域工作的原因。您可以在

scope.row

上使用

v-if

，以确保值存在。我已经更新了我的示例。我遇到了一个类似的问题，我的解决方案是在元素更新之前回滚我的vue版本，以支持新的插槽语法。看见

<!-- old -->
<foo>
    <template slot-scope="scope">
        {{ scope}}
    </template>
</foo>

<!-- new -->
<foo v-slot="scope">
    {{ scope}}
</foo>

<el-table :data="list">
    <el-table-column label="First Name" v-slot="scope">
        {{ scope.row.first_name }}
    </el-table-column>
    <el-table-column prop="last_name" label="Last Name">
    </el-table-column>
</el-table>