https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/VUE%E7%9B%B8%E5%85%B3/ Recent content on Smartchart开发手册 Hugo -- gohugo.io https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/ 简介 # SmartChart 内置了 Vue 2.x 支持，允许在图形编辑器和模板中使用 Vue 的数据绑定、指令和组件能力。与普通 JS 开发相比，Vue 模式更适合需要大量动态交互（筛选器、表格、条件显示）的场景。 注意：SmartChart 的 Vue 模板使用 {[ ]} 替代了标准 Vue 的 {{ }}，避免与 Django 模板语法冲突。 使用场景 # 报表中涉及交互场景较多, 需要数据与页面绑定 开发者熟悉vue 常见绑定 # <!--显示变量message--> <p>{[ message ]}</p> <!--循环产生li,变量sites--> <ol> <li v-for="site in sites"> {[ site.name ]} </li> </ol> <!--绑定输入值变量use--> <input type="checkbox" v-model="use"> <!--显示控制--> <p v-if="seen">现在你看到我了</p> <p v-show="seen">现在你看到我了</p> <!--绑定属性--> <a :href="url"></a> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <div :class="[errorClass ,isActive ? https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/VUE%E7%9B%B8%E5%85%B3/ElementUI/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/VUE%E7%9B%B8%E5%85%B3/ElementUI/ 简介 # ElementUI 是基于 Vue 2.x 的企业级 UI 组件库，SmartChart 内置了对 ElementUI 的支持。通过切换到 basevue.html 模板，可以直接在报表中使用 el-table、el-form、el-select 等丰富的 UI 组件，非常适合有复杂交互需求的管理型报表页面。 应用场景 # 非大屏场景应用 有较多交互场景的报表, 如筛选,表格,分页,下载等 使用方法 # 将base.html 改为 basevue.html, 将自动开启加载vue和elementui 注意vue的变量引用在 模板编辑界面中, 写法变更为 {[ ]} ElementUI组件说明 视屏参考 参考样列 # 新增一个拖拽图形,然后修改相应的数据集及图形 数据集端 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 官方文档 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/ 简介 # DataV 是一个专为大屏数字可视化场景设计的 Vue 组件库，提供了翻牌器、进度池、数字滚动、飞线地图等大屏常用效果组件。SmartChart 在高级设定中内置了对 DataV 的支持，开启后即可在模板中直接使用这些组件。 需要在高级中可开启datav模式 参考视屏 1. DataV基础应用 2. DataV翻盘器 DataV配置方法文档: 图表 DataV 常用组件 # 组件名 标签 用途 翻牌器 <dv-flip-text> 数字/文字滚动展示，适合 KPI 指标 数字滚动 <dv-count-to> 数字动态增长效果 进度池 <dv-percent-pond> 百分比进度展示 活跃环图 <dv-active-ring-chart> 自动轮播的环形图 水位图 <dv-water-level-pond> 水位百分比可视化 飞线地图 <dv-flyline-chart> 地图上的流量飞线 边框 <dv-border-box-n> 数字大屏装饰边框（n=1~13） 装饰 <dv-decoration-n> 大屏装饰线条（n=1~12） 使用 DataV 组件时需在高级设定中开启 DataV 模式，系统会自动加载对应 JS/CSS 8.0移除了DataV,需要自行加载js