表格 ​

表格分为列头和列内容，默认插槽为每一列，可以绑定数据来渲染表格行。

也可以将默认插槽改为list组件，然后list的默认插槽放入列，达到动态渲染的目的。

新拖放的表格默认仅只有一列。

在表格的默认插槽中也可以看到该表格列组件：

我们再给默认插槽添加两列：

由于是给表格组件的默认插槽添加组件，因此列组件就是最合适的，可以看到组件面板中的表格列组件变为了橙色，高亮显示方便点选。

现在表格有三列，具有默认的表头和内容：

建好表格就可以给它绑定数据了。

依然是具有两种绑定方式，既可以通过后端接口的返回值来填充数据，也可以手动指定数据。

这里我们手动指定一下数据，假定这是一个关于排名的数据，有姓名、总分、排名三个字段。

[{
  name: '张三',
  score: '689',
  ranking: 1
},{
  name: '李四',
  score: '672',
  ranking: 2
},{
  name: '王五',
  score: '665',
  ranking: 3
},{
  name: '马六',
  score: '660',
  ranking: 4
}]

[{
  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组件的能力了。

同样利用插槽的能力，也可以给表格列添加按钮组件、标签组件等等。

比如我们再添加一列，该列渲染操作按钮，可以查看详细信息：

给按钮添加一个点击事件，事件内容如下：

function _() {
  console.log(this)
}

function _() {
  console.log(this)
}

点击一下按钮，我们看看输出：

能获取到所有我们需要的数据，包括作用于插槽，然后就可以进行逻辑处理了。