[Vuejs]-Replace 1 and 0 with strings in rendered table using vue

by

0👍

✅

Here is the template using a custom column template. The data for the row is passed inot scope.row, so you can use that to get the data scope.row.Active, In the example, I”m expecting that the number will be either 1 or 0, which will be the truthy equivalent of true or false respectably, so a ternary operation is used to provide the Active/Inactive text

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

You can also use a computed to do this conversion, by adding another bit of data, and keeping your template clean.

note: I haven’t tested the code, and looks like the syntax changed a bit since I last used Element

Leave a comment