el-table的formatter属性的使用方法

最新推荐文章于 2024-08-09 11:14:56 发布

码路老默007

最新推荐文章于 2024-08-09 11:14:56 发布

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2201_75705263/article/details/133866811

版权

文章介绍了formatter在ElementUI的el-table-column中的作用，用于内容格式化，如将数字转换为文本。通过示例展示了如何在HTML和methods中使用formatter函数进行类型转换，使代码更简洁易用。

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

一、formatter是什么？

formatter是el-table-column的一个属性，用来格式化内容。（比如后台给你返0或1，你需要展示成“否”和“是”）

二、详细使用

1.知道formatter之前：

代码如下（示例）：

 <el-table :data="tabledata">
      <el-table-column label="类型"  prop="type">
          <template slot-scope="scope">
                <span>
                  <span v-if="scope.row.type === '1'">菜单</span>
                  <span v-else-if="scope.row.type === '2'">按钮</span>
                  <span v-else>其他</span>
                </span>
            </template>
      </el-table-column>
   </el-table>

2.知道formatter之后，以上代码就可以改写为：

html中：

 <el-table :data="tabledata">
      <el-table-column label="类型" :formatter="typeFormatter" prop="type"></el-table-column>
 </el-table>

methods中：

//规范化类型   默认有四个参数（row, column, cellValue, index）详情可以查看elmentUI官网
      typeFormatter(row){
	        switch(row.type){
	          case '1':
	            return '菜单'
	          case '2':
	            return '按钮'
	          default:
	            return '其他'
	        }

      }