ElementUI中Table-column的formatter属性的使用方法

最新推荐文章于 2025-08-12 08:00:00 发布

@青春之路

最新推荐文章于 2025-08-12 08:00:00 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ElementUI 文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/weixin_41842236/article/details/124784008

ElementUI 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了Element UI中el-table组件的formatter属性，主要用于对表格中的数据进行二次渲染，例如显示复杂的数据结构。示例代码展示了如何定义showDept方法来格式化部门信息，当cellValue存在时返回对应的部门名称，否则显示'暂无部门'。注意showDept方法内必须有返回值以确保渲染生效。

一、官方文档对formatter属性的介绍

在这里插入图片描述

二、formatter属性的作用

主要用来对页面中的数据进行二次渲染。

三、使用方法

<el-table :data="tableData" border :row-class-name="tableRowClassName" height="250">
  <el-table-column prop="id" label="编号" width="200" :resizable="false" align="center"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄" sortable :sort-method="sortMtd"></el-table-column>
  <el-table-column prop="email" label="邮箱"></el-table-column>
  <el-table-column prop="dept.name" label="部门" :formatter="showDept"></el-table-column>
</el-table>

<script>
export default {
  name: "Table",
  data(){
    return {
      tableData: [
        {id:1101,name:'小张',age:22,email: '287934111@qq.com',dept: {id:11,name: '研发部'}},
        {id:1102,name:'小王',age:25,email: '287934222@qq.com',dept:{}},
      ]
    }
  },
  methods: {
    showDept(row, column, cellValue, index){
      console.log(row);
      console.log(column);
      console.log(cellValue);
      console.log(index);
      if (cellValue){
        return cellValue;
      }
      return "暂无部门";
    }
  },
}
</script>