# Smartchart开发手册

https://help.smartchart.cn/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ Recent content on Smartchart开发手册 Hugo -- gohugo.io

#

https://help.smartchart.cn/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/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/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/ 使用场景 # 报表中涉及交互场景较多, 需要数据与页面绑定 开发者熟悉vue 常见绑定 # //显示变量message &lt;p&gt;{[ message ]}&lt;/p&gt; //循环产生li,变量sites &lt;ol&gt; &lt;li v-for=&#34;site in sites&#34;&gt; {[ site.name ]} &lt;/li&gt; &lt;/ol&gt; //绑定输入值变量use &lt;input type=&#34;checkbox&#34; v-model=&#34;use&#34;&gt; //显示控制 &lt;p v-if=&#34;seen&#34;&gt;现在你看到我了&lt;/p&gt; &lt;p v-show=&#34;seen&#34;&gt;现在你看到我了&lt;/p&gt; //绑定属性 &lt;a :href=&#34;url&#34;&gt;&lt;/a&gt; &lt;div :style=&#34;{ color: activeColor, fontSize: fontSize + &#39;px&#39; }&#34;&gt;&lt;/div&gt; &lt;div :class=&#34;[errorClass ,isActive ? activeClass : &#39;&#39;]&#34;&gt;&lt;/div&gt; //绑定点击方法 &lt;a @click=&#34;doSomething&#34;&gt;&lt;/a&gt; 开启VUE # 需要在设定&ndash;&gt;高级设定中可开启vue模式 简单赋值应用 # 系统默认为初始vue及内置vue的data有17个变量(从d0, d1&hellip; d16) 你可以在图形编辑器中给vue的变量赋值, 赋值方式: vapp.d0 = xxxx 你可以将d0赋值为字典, 如: vapp.d0 = { &#39;index1&#39;: 100, &#39;index2&#39;: 300} 注意,我们修改了vue在模板中变量的默认引用方式, 你需要采用如下方法引用: {[d0.

#

https://help.smartchart.cn/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/
应用场景 # 非大屏场景应用 有较多交互场景的报表, 如筛选,表格,分页,下载等 使用方法 # 如下图, 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区端 &lt;div class=&#34;smtdrag&#34; id=&#34;id_1639824145817&#34;&gt; &lt;template&gt; &lt;el-table stripe border height=&#34;100%&#34; :data=&#34;d0.tableData&#34; style=&#34;width: 100%&#34;&gt; &lt;el-table-column label=&#34;hero&#34;&gt; &lt;el-table-column prop=&#34;H1&#34; label=&#34;H1&#34; fixed :default-sort = &#34;{prop: &#39;H2&#39;, order: &#39;descending&#39;}&#34; width=&#34;180&#34;&gt; &lt;/el-table-column&gt; &lt;el-table-column prop=&#34;H2&#34; label=&#34;H2&#34; sortable width=&#34;180&#34;&gt; &lt;/el-table-column&gt; &lt;/el-table-column&gt; &lt;el-table-column sortable prop=&#34;qty&#34; label=&#34;qty&#34;&gt; &lt;/el-table-column&gt; &lt;el-table-column prop=&#34;rate&#34; label=&#34;rate&#34;&gt; &lt;/el-table-column&gt; &lt;/el-table&gt; &lt;/template&gt; &lt;/div&gt;

#

https://help.smartchart.cn/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/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/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/
需要在高级中可开启datav模式 参考视屏 1. DataV基础应用 2. DataV翻盘器 DataV配置方法文档: 图表