应用场景 #
- 非大屏场景应用
- 有较多交互场景的报表, 如筛选,表格,分页,下载等
使用方法 #
将base.html 改为 basevue.html, 将自动开启加载vue和elementui
注意vue的变量引用在 模板编辑界面中, 写法变更为 {[ ]}
参考样列 #
新增一个拖拽图形,然后修改相应的数据集及图形
数据集端
select H1, H2, qty, rate from smartdemo2 limit 100
图形端
let dataset = __dataset__;
let tableData = ds_createMap_all(dataset);
vapp.d0={
tableData: tableData
}
模板Body区域加入element组件el-table,并用拖拽容器进行包裹
<div class="smtdrag" id="id_1639824145817">
<el-table :data="d0.tableData" stripe border height="100%" style="width: 100%">
<el-table-column label="hero">
<el-table-column fixed width="180" prop="H1" label="H1" :default-sort = "{prop:'H2',order:'descending'}"></el-table-column>
<el-table-column sortable width="180" prop="H2" label="H2"></el-table-column>
</el-table-column>
<el-table-column sortable prop="qty" label="qty"></el-table-column>
<el-table-column prop="rate" label="rate"></el-table-column>
</el-table>
</div>