spz-render 数据渲染

支持布局: container

何时使用

需要通过单个/多个接口获取数据并渲染。
需要通过脚本数据来渲染。

代码演示

基本用法

最基本用法，通过接口获取数据。

<spz-render layout="container" src="/api/customers/login_settings">
  <template>
    <div>
      <!-- ... -->
    </div>
  </template>
</spz-render>

通过脚本获取数据

<script id="render-data" type="application/json">
  {
    "name": "John von Neumann",
    "brief": "He was a Hungarian-American mathematician, physicist, computer scientist, engineer and polymath.",
    "imageSrc": "https://img.staticdj.com/5da228ddd934fd6ffecb3f95e985ee5a.gif"
  }
</script>

<spz-render layout="container" src="script:render-data">
  <template>
    <div class="introduction-wrapper">
      <spz-img layout="fixed" width="80" height="80" src="${data.imageSrc}" alt="${data.name}" object-fit="cover"></spz-img>
      <div class="introduction-content">
        <p>${data.name}</p>
        <div>${data.brief}</div>
      </div>
    </div>
  </template>
</spz-render>

属性

属性名	说明	类型	默认值	是否必需
src	获取数据的路径	string	-	是
manual	如果该属性存在，组件挂载时不立即渲染（或不立即请求数据）	-	-	否
template	模板元素的ID, 当template-src不存在且没有template子元素时必需	string	-	否
template-src	异步模板文件的url链接, 当template不存在且没有template子元素时必需	string	-	否
data-empty	当渲染的数据为空时自动添加该属性	-	-	否
loading	发起数据请求时自动添加该属性	-	-	否
finish	数据请求响应后自动添加该属性	-	-	否

src 数据来源方式

src属性值可以用 ; 分隔来配置多个数据来源，有三种获取数据的方式：

通过接口api获取数据
script:<scriptId>：通过 script 脚本获取数据
spz-script:<spzScriptId>：通过 spz-script 获取数据

方法

render

重新请求数据渲染。

参数名	说明	类型	是否必需
src	更新原src	string	否
redo	渲染前是否卸载上一次的内容	boolean	否

rerender

通过传递的新数据来渲染。

参数名	说明	类型	是否必需
data	可用来渲染的数据	Object \| Array	是
once	如果为`true`，元素渲染一次后，不再渲染，且会自动触发 `afterOnceFinish` 事件	boolean	否
redo	渲染前是否卸载上一次的内容	boolean	否

事件

事件参数

参数名	说明	类型
data	当前渲染的数据	Object \| Array

finish

当渲染结束时该事件会自动触发。当使用了 rerender 方法带有 once 参数值为 true 时且当前不是首次渲染时，该事件不会被触发。

afterOnceFinish

当调用 rerender 方法带有 once 参数值为 true 且当前不是首次渲染时该事件会自动触发。

error

当数据请求异常时自动触发。

参数名	说明	类型
data	请求数据时返回的异常信息	Object \| Array

AI 摘要（LLM Ready）

组件标识：spz-render
用途一句话：获取数据并渲染。
可识别属性条目：7
可识别方法小节：2
可识别事件小节：4
关键属性名（Top）：src、manual、template、template-src、data-empty、loading
关键方法名（Top）：render、rerender
关键事件名（Top）：事件参数、finish、afterOnceFinish、error
阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
关联文档：/guide/actions-and-events/ 、/guide/layouts/

spz-render 数据渲染#

#何时使用

#代码演示

#基本用法

#通过脚本获取数据

#属性

#src 数据来源方式

#方法

#render

#rerender

#事件

#事件参数