slot-scope插槽搭配filters的使用

最新推荐文章于 2024-08-09 17:54:22 发布

每天都在努力学习的刘同学

最新推荐文章于 2024-08-09 17:54:22 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/javaltt/article/details/119726023

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在Element UI的el-table中使用slot-scope插槽并结合filters功能，展示如何根据数据值动态过滤显示聘用形式，提升表格展示的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

slot-scope插槽搭配filters的使用

先来定义一个插槽

 <el-table-column label="聘用形式">
            <template slot-scope="scope">
              形式:{{ scope.row.formOfEmployment }}
            </template>
 </el-table-column>

定义filters

filters: {
	// 这里的val是得到的数据
    screenEmployment(val) {
      if (val === 1) {
        return '正式'
      } else {
        return '非正式  '
      }
    }
  },

给插槽添加上过滤器

          <el-table-column label="聘用形式">
            <template slot-scope="scope">
              形式:{{ scope.row.formOfEmployment | screenEmployment }}
            </template>
          </el-table-column>