Element Table 表格后台数据是true或者false页面需要展示是或者否

最新推荐文章于 2024-01-09 10:13:17 发布

MW0309

最新推荐文章于 2024-01-09 10:13:17 发布

阅读量2k

点赞数 2

分类专栏： Vue 文章标签： javascript 前端 vue.js vue elementui

本文链接：https://blog.csdn.net/qq_42222342/article/details/125721677

版权

Vue 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

这篇博客介绍了在 Vue.js 中实现表格数据的条件判断显示的三种方法：1) 使用自定义过滤器；2) 引用全局过滤器；3) 直接在模板中使用三元运算符。通过这些方法，可以方便地将布尔值转换为'是'或'否'的文本显示。示例代码展示了如何在 Vue 模板中应用这些技巧。

摘要由CSDN通过智能技术生成

三种方法

第一种页面使用过滤器

靠过滤器

filters: {
    // 通过自定义过滤器
    capitalize(value) {
      if (value) return '是'
      return value = '否'
    }
  }

全代码

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
       <el-table-column  label="是否启用">
        <template slot-scope="scope">
           <div>{{scope.row.message|capitalize}}</div>
        </template>
        
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        message: true
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        message: false
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        message: false
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        message:  true
      }],
    }
  },
  filters: {
    // 通过自定义过滤器
    capitalize(value) {
      if (value) return '是'
      return value = '否'
    }
  }
};
</script>

<style scoped>
</style>

第二种全局过滤器

在项目main.js中引用全局过滤器

Vue.filter('formate', (value) => {
  if (value) return '是'
  return value = '否'
})

页面直接使用

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
       <el-table-column  label="是否启用">
        <template slot-scope="scope">
           <div>{{scope.row.message|formate}}</div>
        </template>
        
      </el-table-column>
    </el-table>
  </div>
</template>

第三种页面中使用三元运算符判断

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
       <el-table-column  label="是否启用">
        <template slot-scope="scope">
           <div>{{scope.row.message?'是':'否'}}</div>
        </template>
        
      </el-table-column>
    </el-table>
  </div>
</template>