Element Ui

简介 #

ElementUI 是基于 Vue 2.x 的企业级 UI 组件库，SmartChart 内置了对 ElementUI 的支持。通过切换到 basevue.html 模板，可以直接在报表中使用 el-table、el-form、el-select 等丰富的 UI 组件，非常适合有复杂交互需求的管理型报表页面。

应用场景 #

  • 非大屏场景应用
  • 有较多交互场景的报表, 如筛选,表格,分页,下载等

使用方法 #

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

ElementUI 常用组件速查 #

组件 标签 典型用途
表格 <el-table> 数据列表展示、排序、筛选
分页 <el-pagination> 配合后端分页
下拉选择 <el-select> 筛选条件
日期选择 <el-date-picker> 时间范围筛选
输入框 <el-input> 关键词搜索
按钮 <el-button> 操作触发
对话框 <el-dialog> 弹窗详情

完整组件文档参考 ElementUI 官方文档

Edit Edit this page