元素 UI Table 使用插槽作用域问题的列 "Cannot read property 'column_name' of undefined"

Question

这里有人用element ui框架吗？ https://element.eleme.io/#/en-US/

我正在使用其 table 组件并在其列上使用槽作用域。它工作正常，直到我运行 npm update 当然会更新软件包。现在，控制台有很多错误。后来我发现 table 列的这个槽范围导致了这个问题。

非常感谢任何帮助。这是一个 fiddle 的问题。

https://jsfiddle.net/japhfortin/jkzma0v8/3/

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

  data() {
    return {
      input: '',
      list: [
      {
        first_name: 'Foo',
        last_name: 'Bar'
      }
      ]
    }
  },

Answer 1

抛出错误是因为值 scope 在第一次渲染时是一个空对象。这意味着对象行未定义并抛出。在访问它之前，您必须检查 row 值是否已定义。您还可以使用它们的替代形式将值绑定到列。这取决于您的用例。

<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>

您还可以在 scope.row 上使用 v-if 以确保该值在渲染时存在。

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

Answer 2

这个问题是由于 Vue 中的新插槽语法引起的。更多信息请访问 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md

带文字的默认广告位

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

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

使用 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>

Answer 3

问题已在 Vue@2.6.3 上修复

元素 UI Table 使用插槽作用域问题的列 "Cannot read property 'column_name' of undefined"

Element UI Table Column that uses slot-scope Issue "Cannot read property 'column_name' of undefined"

vue.js

vuejs2

element-ui