使用 vue 将 1 和 0 替换为渲染 table 中的字符串

Question

我是 vue 新手。我正在使用 vue.js element.io 框架渲染 table。我正在从 API 获取数据。一切正常。现在我想在 'Active' 字段中添加文本。活动 returns 1 或 0。我想用 'Active' 和 'Inactive' 替换 1 和 0。在 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: []
            };
        },
  }

Answer 1

这是使用自定义列模板的模板。该行的数据在 scope.row 中传递，因此您可以使用它来获取数据 scope.row.Active，在示例中，我希望数字为 1 或 0，这将是分别是 true 或 false 的真实等价物，因此使用三元运算来提供 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>

您还可以使用计算来完成此转换，方法是添加另一位数据并保持模板干净。

注意：我还没有测试过代码，看起来自从我上次使用 Element

以来语法发生了一些变化

使用 vue 将 1 和 0 替换为渲染 table 中的字符串

Replace 1 and 0 with strings in rendered table using vue

rendering

element

laravel

vue.js