Element Plus table formatter function returns html content

View Element Plus table formatter supports return types of string and  VNodeobject;

If you use the h function directly globally, no reference is needed.

The following common basic usage: In Element Plus, you can use custom formatterfunctions to return VNodeobjects to achieve more flexible custom rendering.

First, define a custom formatterfunction in the Table component and return an VNodeobject.

<template>
  <el-table :data="tableData">
    <el-table-column prop="value" label="Value" :formatter="formatValue"></el-table-column>
  </el-table>
</template>

<script>
import { h } from 'vue';

export default {
  data() {
    return {
      tableData: [
        { value: 10 },
        { value: 20 },
        { value: 15 },
        // 其他数据
      ],
    };
  },
  methods: {
    formatValue(row, column, cellValue) {
      if (cellValue > 15) {
        return h('span', { style: 'color: red;' }, cellValue);
      } else {
        return h('span', { style: 'color: green;' }, cellValue);
      }
    },
  },
};
</script>

In the above code, we create an object of an element using ha function (module from Vue 3 ) . Depending on the value of the cell, we dynamically set different styles.@vue/runtime-corespanVNode

In this way, the Table component will render cells that are dynamically styled based on the cell value.

Please note that hthe function is used to create VNodethe object and it accepts three parameters: tag name, attribute object and child node. You can create different VNodeobjects as needed to implement custom rendering.

The effect here: