formatter函数的用法

郑源龙

于 2023-02-27 17:38:35 发布

阅读量356

点赞数

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_69811594/article/details/129246281

版权

该代码片段展示了如何在Vue.js应用中使用ElementUI的el-table组件来渲染表格数据，并通过typeFormat方法对表格列（type）进行格式化，将数值类型转换为对应的文本描述。数据绑定和数组遍历是实现这一功能的关键。

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

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column align="center" type="index" label="序号"></el-table-column>
      <el-table-column align="center" prop="type" label="种类" :formatter="typeFormat"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟表格数据
      tableData: [
        {
          type: 1,
        },
        {
          type: 2,
        },
        {
          type: 3,
        },
      ],
      // 模拟匹配数据
      options: [
        {
          value: "1",
          label: "第一种类型",
        },
        {
          value: "2",
          label: "第二种类型",
        },
        {
          value: "3",
          label: "第三种类型",
        },
        {
          value: "n",
          label: "第n种类型",
        },
      ],
    };
  },
  methods: {
    //表格中formatter绑定的typeFormat方法
    typeFormat(row, column) {
      if (this.options) {//非空判断是为了避免循环的数组为null而产生报错
        var data = "";
        this.options.forEach((item, index) => {
          if (row.type == item.value) {
            data = item.label;
          }
        });
        return data;
      }
    },
  },
};
</script>