应用场景 #
- 非大屏场景应用
- 有较多交互场景的报表, 如筛选,表格,分页,下载等
使用方法 #
如下图, 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区端
<div class="smtdrag" id="id_1639824145817">
<template>
<el-table
stripe
border
height="100%"
:data="d0.tableData"
style="width: 100%">
<el-table-column label="hero">
<el-table-column
prop="H1"
label="H1"
fixed
:default-sort = "{prop: 'H2', order: 'descending'}"
width="180">
</el-table-column>
<el-table-column
prop="H2"
label="H2"
sortable
width="180">
</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>
</template>
</div>