slot-scope插槽搭配filters的使用

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

原创最新推荐文章于 2024-08-09 17:54:22 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

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

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>