From 339dada583679511a7a0a0c92bbb9996501957ad Mon Sep 17 00:00:00 2001 From: "cinwell.li" Date: Tue, 20 Dec 2016 10:47:16 +0800 Subject: [PATCH] Feat/scoped slot table (#1844) * Upgrade to vue 2.1.0 * Table: support scoped slots, resolve #1763, #1161 * Update vue version * fix test * fix test * Update doc * Fix english docs --- build/cooking.test.js | 2 +- examples/docs/en-US/quickstart.md | 2 +- examples/docs/en-US/table.md | 70 ++++++++++++---------------- examples/docs/zh-CN/quickstart.md | 2 +- examples/docs/zh-CN/table.md | 73 +++++++++++++----------------- examples/index.tpl | 2 +- package.json | 10 ++-- packages/table/src/table-column.js | 11 ++--- 8 files changed, 73 insertions(+), 99 deletions(-) diff --git a/build/cooking.test.js b/build/cooking.test.js index 859c3650f..2a9b899a9 100644 --- a/build/cooking.test.js +++ b/build/cooking.test.js @@ -8,7 +8,7 @@ cooking.set({ extends: process.env.CI_ENV ? ['vue2'] : ['vue2', 'lint'], minimize: false, alias: Object.assign(config.alias, { - 'vue$': 'vue/dist/vue.js' + 'vue$': 'vue/dist/vue.common.js' }), postcss: function(webapck) { return [ diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md index 405c2860a..5aadfc980 100644 --- a/examples/docs/en-US/quickstart.md +++ b/examples/docs/en-US/quickstart.md @@ -45,7 +45,7 @@ Typical configurations for these config files are: }, "dependencies": { "element-ui": "^1.0.0", - "vue": "^2.0.5" + "vue": "^2.1.6" }, "devDependencies": { "babel-core": "^6.0.0", diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index d645bd26f..2d9150f55 100644 --- a/examples/docs/en-US/table.md +++ b/examples/docs/en-US/table.md @@ -568,15 +568,13 @@ When there are too many columns, you can fix some of them. width="120"> - + @@ -781,19 +779,17 @@ When the the data is dynamically changed, you might want the table to have a max width="120"> - + @@ -1045,13 +1041,12 @@ Single row selection is supported. You can also select multiple rows. -:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `inline-template` and `show-overflow-tooltip`: when the attribute `inline-template` is set, you can use custom template inside `el-table-column`, and access current row data via `row`; by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell. +:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell. ```html @@ -1269,7 +1266,7 @@ Filter the table to find desired data. ### Custom column template Customize table column so it can be integrated with other components. -:::demo Activate custom column template by adding the `inline-template` attribute. By default, the context of `el-table-column` is the one where `el-table` lies, and you can customize it with the `context` attribute, e.g. `:context="_self"` refers to the current context. This is useful when sometimes Table is encapsulated into another component, and `table-column` is distributed by slots. In `el-column`, you have access to the following data: row, column, $index and store (state management of Table). +:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended). ```html @@ -1410,8 +1402,6 @@ Customize table column so it can be integrated with other components. | resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false | | formatter | function that formats content | Function(row, column) | — | — | | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false | -| context | context of Table-column, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context | Object | - | current context where Table lies | -| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), store (table store) }` | — | — | | align | alignment | string | left/center/right | left | | class-name | class name of cells in the column | string | — | — | | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — | diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md index 84e7d92be..d606cba0e 100644 --- a/examples/docs/zh-CN/quickstart.md +++ b/examples/docs/zh-CN/quickstart.md @@ -45,7 +45,7 @@ }, "dependencies": { "element-ui": "^1.0.0", - "vue": "^2.0.5" + "vue": "^2.1.6" }, "devDependencies": { "babel-core": "^6.0.0", diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 6c9799c98..5de412faa 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -581,15 +581,13 @@ width="120"> - + @@ -791,19 +789,17 @@ width="120"> - + @@ -1055,7 +1051,7 @@ 选择多行数据时使用 Checkbox。 -:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-overflow-tooltip`：设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`prop`属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。 +:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。 ```html @@ -1278,7 +1276,7 @@ ### 自定义列模板 自定义列的显示内容，可组合其他组件使用。 -:::demo 通过设置 `inline-template` 属性可以开启自定义模板功能，此时 `el-table-column` 的上下文指的是 `el-table` 所处的上下文，当然你可以通过 `context` 属性指定上下文环境，例如设置成 `:context="_self"` 就是指的当前上下文。有些时候我们会把 table 封装在其他组件里，通过 slot 设置 `table-column`，这样的话就要注意设置 `context`。在 column 组件内部，可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。 +:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。(`1.1` 后支持通过 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 自定义模板。之前的 `inline-template` 同样适用，但不推荐。) ```html @@ -1418,8 +1409,6 @@ | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true | | formatter | 用来格式化内容 | Function(row, column) | — | — | | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false | -| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root` | Object | - | Table 所处上下文 | -| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — | | align | 对齐方式 | String | left, center, right | left | | class-name | 列的 className | string | — | — | | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — | diff --git a/examples/index.tpl b/examples/index.tpl index f86bfc3f9..5b004a04e 100644 --- a/examples/index.tpl +++ b/examples/index.tpl @@ -8,7 +8,7 @@
<% if (process.env.NODE_ENV === 'production') { %> - + <% } %> <% if (process.env.NODE_ENV === 'production') { %>