SatRDA文档

# Html单元格

下面我们学习如何在报表展示html。报表的单元格可以展示html控件，借助html的灵活性，我们可以实现各种样式的报表。

未配置过报表设计器的请先参考报表设计器

本例展示如何将第三方的element-ui控件展示在报表中。 效果如下: rpt

# 设计报表

我们可以按照常规报表介绍新建报表，设计数据源，设计报表。

也可以直接打开示例

本地报表设计器http://localhost:5555/designer/?report=hdemo (opens new window)

在线报表设计器http://www.satrda.com/designer/?report=hdemo (opens new window)

# html单元格

html单元格类型支持普通html和vue两种语法。两种方式都支持将数据源作为模板变量。下面我们分别介绍两种用法。

# 普通html

选中A2单元格, 在右边属性栏，类型选择html，下面的html属性设置为

<label>{{'v1:' + value1 + ' v2:' + value2}}</label>
rpt

其中value1, value2为当前行的值，如果这行value1值为1，value2值为2，这个单元格会显示如下：v1:1 v2:2，

# vue

单元格支持使用vue, h5dw组件中由于数据大小默认不包含vue，使用vue时，需要在网页中自行引入vue.js，如果使用vue的第三方组件如element-ui，也需要自行引入。以当前示例为例 ，

  1. 在示例的网页中引入了
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  1. 选中C2单元格, 在右边属性栏，类型选择html，选中vue2,html属性设置为
<el-switch size='mini' v-model='value1' active-text='按月付费' inactive-text='按年付费'></el-switch>

v-model='value1' 表示当按钮状态改变时，将数据源中的value1值改变

rpt

# 响应事件

使用vue时，我们可以设置响应事件，如报表中的按钮，选中B2单元格, 在右边属性栏，类型选择html，选中vue2,html属性设置为

 <el-button @click='bt' size='mini'>按钮</el-button>

其中@click='bt'在vue中表示点击按钮时调用bt方法，在h5dw中不同，会触发通用的CellHtmlEvent方法，其中参数key等于bt，row为当前行数据，name为当前单元格名称，args为点击按钮时传递的参数。 示例如下：

dw1.on('CellHtmlEvent',(evt, row, name, key, ...args) => {
    console.log('CellHtmlEvent',evt, row, name, key, ...args);
    if(key == 'bt'){
        Vue.prototype.$message({
            type: 'success',
            message: '点击了:' + key
        });
    }
});

使用普通html时，我们可以通过CellRender事件，添加onclick属性设置响应事件，如

dw1.on('CellRender',(evt, row, name, el) => {
    // el为单元格的html元素
    const edit = el.querySelector('.bt-add')
    edit.onclick = () => {
        dw1.insertRow(row)
    }

    const del = el.querySelector('.bt-delete')
    del.onclick = () => {
        this.dwMain.deleteRow(row);
    }

});

← 多数据源展示 →