插槽和 filter 联用处理表格数据

最新推荐文章于 2024-09-12 14:28:05 发布

最冷一天.

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量89

点赞数

分类专栏：工作经验文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_61603704/article/details/131456751

版权

工作经验专栏收录该内容

4 篇文章 0 订阅

订阅专栏

插槽和 filter 联用处理表格数据

全部代码

<template>
  <el-table :data="tableData" style="width: 100%">
    
    <el-table-column label="flag" prop="flag" width="180">
      <template slot-scope="scope">
        {{ scope.row.flag | flagFilter }}
      </template>
    </el-table-column>


  </el-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          flag: 1
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          flag: 1
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          flag: 0
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          flag: 0
        }
      ]
    }
  },
  filters: {
    flagFilter (val) {
      switch (val) {
        case 0:
          val = '入驻'
          break
        case 1:
          val = '毕业'
          break
        default:
          val = ''
      }
      return val
    }
  },

}
</script>

      <template slot-scope="scope">
        {{ scope.row.flag | flagFilter }}
      </template>

| 为管道符，管道符左侧的数据为待处理的数据，会作为第一个参数传给 filter，也就是如下的 val

    flagFilter (val) {
      switch (val) {
        case 0:
          val = '入驻'
          break
        case 1:
          val = '毕业'
          break
        default:
          val = ''
      }
      return val
    }