利用可视化设计器构建你的应用系统-做一个懂你的人
动态绑定
有些组件的属性值是 input 输入框类型的
比如 table-column 这个表格列组件，其中 label 属性是通过输入框来设置的
现在我们拖入一个表格组件到页面设计器中，看下默认展示的样子
然后我们在右侧属性面板中，选中我们的表格列组件
可以看到表格列组件的 header 插槽中是默认渲染了一个 text 组件的
点击删除按钮，将这个默认的插槽内容删除掉，再将 label 属性值中输入 名称
可以看到表头的标题已经被我们修改了
这是通过输入静态文字来设置属性的值
但是有一些场合可能存在需要通过动态绑定数据来设置这些属性的值，这里面又分了两种情况
作用域插槽
第一种就是从作用域插槽中获取数据，此时可以在输入框中使用 #
# 代表获取当前组件所在插槽的作用域数据 scopeData
#name 表示取其中的name属性 ，如果是在表格中，那么使用 #row 就是代表取当前的行数据
假设有一个表格的列是通过数组渲染出来的，数组内容如下：
js
[{
title: "名称",
key: "name"
},{
title: "数量",
key: "number"
},{
title: "单价",
key: "price"
}]然后表格列的标题就从数组中每一项的 title 取值
这时我们可以给表格的默认插槽设置为一个列表
然后给列表组件绑定上面的数据，再将列表的默认插槽添加为一个表格列组件
同样，清空表格列的 header 插槽，设置我们的 label 属性
这样表格列的标题就能够动态渲染出来了
回到表格，我们给表格也设置一些数据
为了演示，先手动指定一下我们的数据，设置为下面这样
js
[{
name: "耳机",
number: 108,
price: 350
},{
name: "充电器",
number: 56,
price: 98
},{
name: "自定车",
number: 15,
price: 1200
}]然后我们就可以给表格列的默认插槽 text 组件设置数据了
由于我们这是一个双层作用域插槽，第一层就是列表的作用域插槽，第二层就是表格的作用域插槽，因此可以将文本组件的内容设置为从一个函数中获取
在编辑器中书写如下代码
js
function _() {
// 拿到当前作用域数据
let scopeData = this.scopeData
// 获取当前作用域的行数据和父级作用域的属性key的值
return scopeData.row[scopeData._parent.key]
}这样我们的列表就渲染成功了
如果表格列是固定的，不是通过 list 列表组件渲染的，那么列表的内容就可以直接通过 #row.name 来获取
其中 # 的形式不是固定的，它只是用来表达取当前作用域的数据，如果是 ## 则表示取上层作用域
可以放在表达式的任意位置，如：#row.name、row#name、row.name#、##name、##row.name 都是可以的
collectionData
第二种就是从 collectionData 中的获取数据，此时可以使用标识 @
@label 表示取 collectionData.label 的值，支持向下获取，比如 @a.b.c
假设我们有一个卡片，清空 header 插槽中的内容，在 collectionData 中有一个字段 cardTitle，值为 我是卡片标题
现在设置卡片的 header 属性
这样卡片的标题就被设置成了 collectionData.cardTitle 的值
卡片的内容是通过一个 text 组件来渲染的，那么我们可以为这个文本组件也设置一下属性
首先给 collectionData 设置一个字段 cardContent，值为 我是卡片的内容
然后选中文本组件，查看一下它的属性面板
上面演示过了，如果要取插槽中的数据可以通过 #，现在要取 collectionData 中的数据，那么就设置下面的数据绑定属性，直接写属性名就可以
这时卡片的内容插槽，也就是文本组件就渲染出了 collectionData.cardContent 的值
快捷键
页面设计器中的快捷键
| 按键 | 说明 |
|---|---|
| Alt | 唤出右侧属性面板 |
| 空格 | 唤出底部组件面板 |
| shift + 空格 | 隐藏组件面板和属性面板 |
| ctrl + 上 | 上一个元素 |
| ctrl + 下 | 下一个元素 |
| ctrl + 左 | 切换到同级左边元素 |
| ctrl + 右 | 切换到同级右边元素 |
| ctrl + 鼠标右键 | 定位当前元素弹出选中 |
| ctrl + 鼠标左键 | 单纯点击组件 |
| shift + 上/下/左/右 | 切换组件面板位置 |
| shift + A | 唤出/隐藏 组件面板(修改层级) |
| shift + D | 唤出/隐藏 属性面板(修改层级) |
列表中的快捷键
| 按键 | 说明 |
|---|---|
| 空格 | 唤出检索面板 |
【项目体验】
系统管理端地址 ：http://www.lecen.top/manage