利用可视化设计器构建你的应用系统-做一个懂你的人
表格
表格分为列头和列内容，默认插槽为每一列，可以绑定数据来渲染表格行。
也可以将默认插槽改为list组件，然后list的默认插槽放入列，达到动态渲染的目的。
新拖放的表格默认仅只有一列。
在表格的默认插槽中也可以看到该表格列组件：
我们再给默认插槽添加两列：
由于是给表格组件的默认插槽添加组件，因此列组件就是最合适的，可以看到组件面板中的表格列组件变为了橙色，高亮显示方便点选。
现在表格有三列，具有默认的表头和内容：
建好表格就可以给它绑定数据了。
依然是具有两种绑定方式，既可以通过后端接口的返回值来填充数据，也可以手动指定数据。
这里我们手动指定一下数据，假定这是一个关于排名的数据，有姓名、总分、排名三个字段。
js
[{
name: '张三',
score: '689',
ranking: 1
},{
name: '李四',
score: '672',
ranking: 2
},{
name: '王五',
score: '665',
ranking: 3
},{
name: '马六',
score: '660',
ranking: 4
}]绑定好数据，我们去更改表头名称，这里操作顺序可以随意，也可以先更改表头再绑定数据：
点击要修改的表头：
因为表头也是通过文本渲染出来的，因此点击之后就可以配置文本属性：
第一列设置名称为姓名，依次设置好后两列：
可以看到已经渲染了四行，只不过表格内容我们还没设置，因此第一行显示默认数据，其他行都为空数据。
我们点击第一列的内容1，同样打开文本属性面板：
默认内容的文本值为row#c1，其中的row是从表格的插槽作用域中获取的，同理还能获取到$index等。
row#c1就表示从当前作用域插槽中获取行数据，并取它的c1字段值作为列内容。
第一列是姓名，那么应该从name字段获取，因此我们修改一下：
同样修改好另外两列，我们再来看下效果：
就这样一个表格已经做完了。
如果想要动态加载表头，可以删除掉表格的默认插槽组件，然后添加list组件，这样就可以使用list组件的能力了。
同样利用插槽的能力，也可以给表格列添加按钮组件、标签组件等等。
比如我们再添加一列，该列渲染操作按钮，可以查看详细信息：
给按钮添加一个点击事件，事件内容如下：
js
function _() {
console.log(this)
}点击一下按钮，我们看看输出：
能获取到所有我们需要的数据，包括作用于插槽，然后就可以进行逻辑处理了。
列表
list 组件用于渲染被嵌套的子元素，类似于 v-for
它的使用场景有很多，比如下拉列表、单选按钮组、多选按钮组、折叠面板、列表等等。
可以通过两种方式给list组件指定绑定的数据：接口返回和手动指定。
它的每一个子组件都可以通过作用域获取到对应数组项的值。
示例: 使用手动指定数据渲染一个 select下拉选项
- 页面中拖入一个select组件，这时它有一个默认的选项：
- 找到属性面板中的插槽，可以看到它的默认插槽中有一个元素，也就是option选项
现在点击[删除]，来删除掉这个默认插槽：
这时下拉框就没有了选项：
- 点击默认插槽中的[添加]，然后选中组件面板中的列表组件
这样list组件就被添加到了下拉框组件中
- 在列表组件的属性面板中配置【手动指定数据】编写代码并保存。
js
[
{
id: 1,
name: '男'
},
{
id: 0,
name: '女'
},
{
id: -1,
name: '保密'
}
]- 在list组件属性面板中给 default 插槽添加一个
option组件。在右侧的属性面板中通过#绑定lable及value
这样就通过列表渲染出一个具有三个选项的下拉框，使用#来获取到了作用域中的值。
- 回到下拉框，我们给它做一个数据绑定：
现在选中一个下拉选项，就能看它绑定的数据变化：
list组件可以被添加到任意组件的任意插槽中，也可以在他的默认插槽中添加任意数量的任意组件。
子组件使用#可以获取到list组件作用域对象，从而访问其中的值。
【项目体验】
系统管理端地址 ：http://www.lecen.top/manage