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

  • Post author:
  • Post category:其他




一、官方文档对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>

在这里插入图片描述


注意:在showDept方法中

必须设置

返回值


,否则无效!

在这里插入图片描述



版权声明:本文为weixin_41842236原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。