使用 Vue

简介 #

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 ? activeClass : '']"></div>
<!--绑定点击方法-->
<a @click="doSomething"></a>

开启VUE #

需要在设定–>高级设定中可开启vue模式

简单赋值应用 #

系统默认为初始vue及内置vue的data有17个变量(从d0, d1… d16) 你可以在图形编辑器中给vue的变量赋值, 赋值方式:

vapp.d0 = xxxx

输入图片说明

你可以将d0赋值为字典, 如:

vapp.d0 = { 'index1': 100, 'index2': 300}

注意,我们修改了vue在模板中变量的默认引用方式, 你需要采用如下方法引用: {[d0.index1]}

使用模板可以更方便使用VUE #

  • 你也可以在 模板开发中 使用VUE
  • 开启方法, 首先你需要在高级设定中开启模板功能,
  • 然后你可以看到 模板 的菜单, 进入编辑器

你可以在模板的script中加入自定义代码来覆盖系统默认的

<script>
    var vapp = new Vue({el: '#vue_app', delimiters: ['{[', ']}'], 
      data: {
              tableData:''
        },
      methods: {
          formatter(row, column) {
            return row.address;
        }
    }
    });
</script>

Vue 内置变量说明 #

变量 类型 说明
vapp Vue 实例 全局 Vue 应用对象，可直接在图形 JS 中引用
vapp.d0 ~ vapp.d16 any 系统预置的 17 个数据变量，可赋值任意类型
{[ 变量名 ]} 模板语法 在 HTML 模板中显示变量值（非标准 {{ }}）

常见用法速查 # 

// 图形编辑器中：将数据集转为字典并赋给 Vue 变量
let dataset = __dataset__;
let tableData = ds_createMap_all(dataset);
vapp.d0 = { tableData: tableData };

// 赋值为对象
vapp.d0 = { 'index1': 100, 'index2': 300 };

// 模板中引用
// {[ d0.index1 ]}   → 100
// {[ d0.tableData ]} → 表格数据
Edit Edit this page