Introduction #

ElementUI is a Vue 2.x enterprise UI component library with built-in SmartChart support. By switching to basevue.html template, you can use el-table, el-form, el-select and other rich UI components directly in reports, ideal for management report pages with complex interaction needs.

Use Cases #

• Non-large-screen applications
• Reports with many interactions: filters, tables, pagination, downloads

Usage #

Change base.html to basevue.html to auto-load Vue and ElementUI

Note: Vue variable references in template editor use {[ ]} syntax

• ElementUI Documentation
• Video Reference

Example #

Add a drag chart, then modify the dataset and chart

Dataset:

select  H1, H2, qty, rate from smartdemo2 limit 100

Chart:

let dataset = __dataset__;
let tableData = ds_createMap_all(dataset);

vapp.d0={
    tableData: tableData
}

Add el-table component in template body, wrapped in drag container:

<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>

ElementUI Common Components #

Full documentation at ElementUI Official Docs