首页 前端知识 Element Plus table formatter函数返回html内容

Element Plus table formatter函数返回html内容

2024-02-09 20:02:22 前端知识 前端哥 715 477 我要收藏

查看 Element Plus table formatter 支持返回 类型为string 和 VNode对象;

若依全局直接用h函数,无需引用

下面普通基本用法:在Element Plus中,你可以使用自定义的formatter函数来返回VNode对象,从而实现更灵活的自定义渲染。

首先,在Table组件中定义一个自定义的formatter函数,并返回一个VNode对象。

<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>

在上述代码中,我们使用h函数(来自Vue 3的@vue/runtime-core模块)创建了一个span元素的VNode对象。根据单元格的值,我们动态设置了不同的样式。

这样,Table组件将会渲染出根据单元格值动态设置样式的单元格。

请注意,h函数用于创建VNode对象,它接受三个参数:标签名、属性对象和子节点。你可以根据需要创建不同的VNode对象来实现自定义渲染。

我这边效果:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1589.html
标签
elementui
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!