2023-05-05 17:36:52 +08:00

47 lines
5.1 KiB
XML

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Smartchart开发手册</title>
<link>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/</link>
<description>Recent content on Smartchart开发手册</description>
<generator>Hugo -- gohugo.io</generator><atom:link href="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/index.xml" rel="self" type="application/rss+xml" />
<item>
<title></title>
<link>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/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>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/</guid>
<description>使用场景 # 报表中涉及交互场景较多, 需要数据与页面绑定 开发者熟悉vue 常见绑定 # &amp;lt;!--显示变量message--&amp;gt; &amp;lt;p&amp;gt;{[ message ]}&amp;lt;/p&amp;gt; &amp;lt;!--循环产生li,变量sites--&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li v-for=&amp;#34;site in sites&amp;#34;&amp;gt; {[ site.name ]} &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;!--绑定输入值变量use--&amp;gt; &amp;lt;input type=&amp;#34;checkbox&amp;#34; v-model=&amp;#34;use&amp;#34;&amp;gt; &amp;lt;!--显示控制--&amp;gt; &amp;lt;p v-if=&amp;#34;seen&amp;#34;&amp;gt;现在你看到我了&amp;lt;/p&amp;gt; &amp;lt;p v-show=&amp;#34;seen&amp;#34;&amp;gt;现在你看到我了&amp;lt;/p&amp;gt; &amp;lt;!--绑定属性--&amp;gt; &amp;lt;a :href=&amp;#34;url&amp;#34;&amp;gt;&amp;lt;/a&amp;gt; &amp;lt;div :style=&amp;#34;{ color: activeColor, fontSize: fontSize + &amp;#39;px&amp;#39; }&amp;#34;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div :class=&amp;#34;[errorClass ,isActive ? activeClass : &amp;#39;&amp;#39;]&amp;#34;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;!--绑定点击方法--&amp;gt; &amp;lt;a @click=&amp;#34;doSomething&amp;#34;&amp;gt;&amp;lt;/a&amp;gt; 开启VUE # 需要在设定&amp;ndash;&amp;gt;高级设定中可开启vue模式
简单赋值应用 # 系统默认为初始vue及内置vue的data有17个变量(从d0, d1&amp;hellip; d16) 你可以在图形编辑器中给vue的变量赋值, 赋值方式:
vapp.d0 = xxxx 你可以将d0赋值为字典, 如:
vapp.d0 = { &amp;#39;index1&amp;#39;: 100, &amp;#39;index2&amp;#39;: 300} 注意,我们修改了vue在模板中变量的默认引用方式, 你需要采用如下方法引用: {[d0.</description>
</item>
<item>
<title></title>
<link>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/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>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/</guid>
<description> 应用场景 # 非大屏场景应用 有较多交互场景的报表, 如筛选,表格,分页,下载等 使用方法 # 将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,并用拖拽容器进行包裹
&amp;lt;div class=&amp;#34;smtdrag&amp;#34; id=&amp;#34;id_1639824145817&amp;#34;&amp;gt; &amp;lt;el-table :data=&amp;#34;d0.tableData&amp;#34; stripe border height=&amp;#34;100%&amp;#34; style=&amp;#34;width: 100%&amp;#34;&amp;gt; &amp;lt;el-table-column label=&amp;#34;hero&amp;#34;&amp;gt; &amp;lt;el-table-column fixed width=&amp;#34;180&amp;#34; prop=&amp;#34;H1&amp;#34; label=&amp;#34;H1&amp;#34; :default-sort = &amp;#34;{prop:&amp;#39;H2&amp;#39;,order:&amp;#39;descending&amp;#39;}&amp;#34;&amp;gt;&amp;lt;/el-table-column&amp;gt; &amp;lt;el-table-column sortable width=&amp;#34;180&amp;#34; prop=&amp;#34;H2&amp;#34; label=&amp;#34;H2&amp;#34;&amp;gt;&amp;lt;/el-table-column&amp;gt; &amp;lt;/el-table-column&amp;gt; &amp;lt;el-table-column sortable prop=&amp;#34;qty&amp;#34; label=&amp;#34;qty&amp;#34;&amp;gt;&amp;lt;/el-table-column&amp;gt; &amp;lt;el-table-column prop=&amp;#34;rate&amp;#34; label=&amp;#34;rate&amp;#34;&amp;gt;&amp;lt;/el-table-column&amp;gt; &amp;lt;/el-table&amp;gt; &amp;lt;/div&amp;gt; </description>
</item>
<item>
<title></title>
<link>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/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>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/</guid>
<description>需要在高级中可开启datav模式
参考视屏
1. DataV基础应用 2. DataV翻盘器 DataV配置方法文档: 图表</description>
</item>
</channel>
</rss>