Замените 1 и 0 на строки в визуализированной таблице, используя vue - PullRequest
Новая
       7

Замените 1 и 0 на строки в визуализированной таблице, используя vue

0 голосов
/ 07 сентября 2018

Я новичок в VUE. Я рендеринг таблицы с использованием vue.js element.io Framework. Я получаю данные из API. Все работает нормально Теперь я хочу добавить текст в поле «Активные». Active возвращает 1 или 0. Я хочу заменить 1 и 0 на «Active» и «Inactive». В Laravel я бы сделал это так: 

{{($Active == 1)?'Active':'Inactive'}}


  <el-table v-loading="loading" :data="result" @sort-change="sortChange">
                <el-table-column prop="FirstName" label="First name" sortable="custom"></el-table-column>
                <el-table-column prop="LastName" label="Last name" sortable="custom"></el-table-column>
                <el-table-column prop="Active" label="Status" sortable="custom"></el-table-column>
            </el-table>

end vue looks like:

 export default {
        name:"contacts",
        components: {
            'tinymce': VueEasyTinyMCE
        },
        data: function(){
            return {
                result: []
            };
        },
  }

1 Ответ

0 голосов
/ 07 сентября 2018

Вот шаблон с использованием пользовательского шаблона столбца.Данные для строки передаются inot scope.row, поэтому вы можете использовать их для получения данных scope.row.Active. В этом примере я ожидаю, что число будет равно 1 или 0, что будет истинным эквивалентомИстинно или ложно, соответственно, поэтому для предоставления активного / неактивного текста используется троичная операция 

<el-table v-loading="loading" :data="result" @sort-change="sortChange">
  <el-table-column prop="FirstName" label="First name" sortable="custom"></el-table-column>
  <el-table-column prop="LastName" label="Last name" sortable="custom"></el-table-column>
  <el-table-column prop="Active" label="Status" sortable="custom"></el-table-column>

  <el-table-column label="Status" sortable="custom">
    <template slot-scope="scope">
      {{scope.row.Active?'Active':'Inactive'}}
    </template>
  </el-table-column>
</el-table>

. Вы также можете использовать вычисления для этого преобразования, добавив еще один бит данных и поддерживая чистоту вашего шаблона..

примечание: я не проверял код, и похоже, что синтаксис немного изменился с тех пор, как я в последний раз использовал Элемент

...