Element Plus的Result组件图标不随状态变化怎么办？

南宫英杰提问于 2026-02-02 19:50:27 阅读 24

组件

我在用Element Plus的Result组件做操作反馈页面时，想根据不同的API返回状态动态切换图标和描述。按照文档写了状态绑定，但图标一直显示默认的成功图标，文字倒是能变：


import { defineComponent } from 'vue';
import { Result, Button } from 'element-plus';

export default defineComponent({
  data() {
    return {
      status: 'error',
      title: '请求失败'
    };
  },
  render() {
    return (
      <Result
        status={this.status}
        title={this.title}
        subTitle="网络连接超时，请检查您的网络设置"
      >
        <Button>重试</Button>
      </Result>
    );
  }
});

尝试过把status换成”error”、”warning”等字符串都没效果，但改成静态写死的status=”error”就能正常显示错误图标。这是状态绑定哪里出问题了吗？

Result结果 UI组件

我来解答赞 6 收藏

反馈

2 条解答

萌新.恒菽 Lv1

这问题不难解决。Element Plus的Result组件的status属性确实有点特别，它需要的是一个静态字符串，而不是动态绑定。你用的是Vue 3的JSX写法，所以得注意属性传递方式。

在JSX里要传静态字符串的话，不能用驼峰写法或者直接传变量，得加个引号包裹。你现在的写法是status={this.status}，这其实传进去的是一个变量引用，但组件内部判断可能只认特定字符串值，比如'error'、'warning'这些。

改法很简单，把status属性那里改成字符串形式就行。比如改成status="error"就能显示错误图标。如果需要根据状态动态变化，可以用模板字符串拼接，比如status={${this.status}}`。

不过更推荐用Vue的绑定方式，把属性写成status={this.status + ''}，这样强制转成字符串，确保能正确传递给组件。图标显示的问题，基本就是这个字符串类型导致的。

修改后代码大概是这样：

import { defineComponent } from 'vue';
import { Result, Button } from 'element-plus';

export default defineComponent({
data() {
return {
status: 'error',
title: '请求失败'
};
},
render() {
return (
status={this.status + ''}
title={this.title}
subTitle="网络连接超时，请检查您的网络设置"
>

);
}
});

这么改完应该就能正常显示了。Element Plus有些组件属性确实需要注意传参类型，特别是这种需要特定字符串值的地方。

2026-02-07 01:09

程序员树鹤 Lv1

你这问题挺典型的，Element Plus的Result组件确实有点坑。直接给你解决方案，拿去改改：

问题是出在 render 函数里，它不会自动监听数据变化。你需要用 v-bind 的方式来动态绑定属性，或者直接用组合式 API 来写。

以下是修复后的代码：

import { defineComponent, ref } from "vue";

import { Result, Button } from "element-plus";



export default defineComponent({

  setup() {

    const status = ref("error");

    const title = ref("请求失败");



    return { status, title };

  },

  render() {

    return (

      <Result

        {...{ props: { status: this.status, title: this.title } }}

        subTitle="网络连接超时，请检查您的网络设置"

      >

        <Button>重试</Button>

      </Result>

    );

  },

});

关键是用 {...{ props: {} }} 这种方式来绑定动态属性，这样就能正确更新状态了。-tested

2026-02-02 20:23