Столбец таблицы пользовательского интерфейса элемента, в котором используется область слотов.

Question

Кто-нибудь здесь использует элемент UI Framework?https://element.eleme.io/#/en-US/

Я использую компонент таблицы и слот-область для столбцов.Работает нормально, пока я не запустил обновление npm, которое, конечно, обновляет пакеты.Теперь в консоли много ошибок.А позже я обнаружил, что эта область слота столбца таблицы вызывает проблему.

Любая помощь будет принята с благодарностью.Вот скрипка вопроса.

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

Проблема возникает из-за нового синтаксиса слота в 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>

Другой пример использования компонента Table элемента UI.

Примечание. Обновите 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 2

Проблема исправлена ​​на Vue@2.6.3

Answer 3

Ошибка генерируется, потому что значение 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>

Вы также можете использовать v-if на scope.row, чтобы убедиться, что значение присутствует во время рендеринга.

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