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

Question

Anyone here uses element ui framework? https://element.eleme.io/#/en-US/

I'm using its table component and using slot-scope on its columns. It's working fine until I ran npm update which of course updates the packages. Now, console has a lot of errors. And later I discovered that this slot-scope of the table column causes the issue.

Any help would be very much appreciated. Here is a fiddle of the issue.

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

The error is thrown because the value scope is an empty object on the first render. It means that the object row is undefined an it throws. You have to check that the row value is defined before accessing it. You can also use their alternative form to bind the value to the column. It depends of your use case.

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

You can also use a v-if on the scope.row to ensure that the value is present at render time.

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