Html单元格

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

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

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

设计报表

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

也可以直接打开示例

本地报表设计器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>

其中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">

2. 选中C2单元格, 在右边属性栏，类型选择html，选中vue2,html属性设置为

<el-switch size='mini' v-model='value1' active-text='按月付费' inactive-text='按年付费'></el-switch>

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