Commit f1881ef4 authored by njleonzhang's avatar njleonzhang

Merge remote-tracking branch 'upstream/dev' into dev

parents c9d23147 b31ee664
...@@ -19,10 +19,12 @@ ...@@ -19,10 +19,12 @@
<details> <details>
<summary>如何在 Table 组件的每一行添加操作该行数据的按钮?</summary> <summary>如何在 Table 组件的每一行添加操作该行数据的按钮?</summary>
使用 inline-template 即可: 使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可:
```html ```html
<el-table-column label="操作" inline-template> <el-table-column label="操作">
<el-button @click.native="showDetail(row)">查看详情</el-button> <template scoped="props">
<el-button @click.native="showDetail(props.row)">查看详情</el-button>
</template>
</el-table-column> </el-table-column>
``` ```
参数 `row` 即为对应行的数据。 参数 `row` 即为对应行的数据。
...@@ -41,7 +43,7 @@ ...@@ -41,7 +43,7 @@
```css ```css
[class^="el-icon-my"], [class*=" el-icon-my"] { [class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"your-font-family" !important; font-family:"your-font-family" !important;
/* 以下内容参照第三方图标库本身的规则 */ /* 以下内容参照第三方图标库本身的规则 */
font-size: inherit; font-size: inherit;
font-style:normal; font-style:normal;
...@@ -104,10 +106,12 @@ For other components, the `.native` modifier is still mandatory. ...@@ -104,10 +106,12 @@ For other components, the `.native` modifier is still mandatory.
<details> <details>
<summary>How do I add buttons in each row of Table to operate data of that row?</summary> <summary>How do I add buttons in each row of Table to operate data of that row?</summary>
Just use `inline-template`: Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
```html ```html
<el-table-column label="Operations" inline-template> <el-table-column label="Operations">
<el-button @click.native="showDetail(row)">Details</el-button> <template scoped="props">
<el-button @click.native="showDetail(props.row)">Details</el-button>
</template>
</el-table-column> </el-table-column>
``` ```
The parameter `row` is the data object of corresponding row. The parameter `row` is the data object of corresponding row.
...@@ -126,7 +130,7 @@ You just need to modify the class name prefix of the third-party library (see th ...@@ -126,7 +130,7 @@ You just need to modify the class name prefix of the third-party library (see th
```css ```css
[class^="el-icon-my"], [class*=" el-icon-my"] { [class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"your-font-family" !important; font-family:"your-font-family" !important;
/* The following is based on original CSS rules of third-party library */ /* The following is based on original CSS rules of third-party library */
font-size: inherit; font-size: inherit;
font-style:normal; font-style:normal;
......
<script> <script>
import Clickoutside from 'element-ui/src/utils/clickoutside'; import Clickoutside from 'element-ui/src/utils/clickoutside';
import Emitter from 'element-ui/src/mixins/emitter'; import Emitter from 'element-ui/src/mixins/emitter';
import ElButton from 'element-ui/packages/button';
import ElButtonGroup from 'element-ui/packages/button-group';
export default { export default {
name: 'ElDropdown', name: 'ElDropdown',
...@@ -11,6 +13,11 @@ ...@@ -11,6 +13,11 @@
directives: { Clickoutside }, directives: { Clickoutside },
components: {
ElButton,
ElButtonGroup
},
props: { props: {
trigger: { trigger: {
type: String, type: String,
......
...@@ -94,45 +94,45 @@ export default { ...@@ -94,45 +94,45 @@ export default {
{ {
this._l(columnRows, (columns, rowIndex) => this._l(columnRows, (columns, rowIndex) =>
<tr> <tr>
{ {
this._l(columns, (column, cellIndex) => this._l(columns, (column, cellIndex) =>
<th <th
colspan={ column.colSpan } colspan={ column.colSpan }
rowspan={ column.rowSpan } rowspan={ column.rowSpan }
on-mousemove={ ($event) => this.handleMouseMove($event, column) } on-mousemove={ ($event) => this.handleMouseMove($event, column) }
on-mouseout={ this.handleMouseOut } on-mouseout={ this.handleMouseOut }
on-mousedown={ ($event) => this.handleMouseDown($event, column) } on-mousedown={ ($event) => this.handleMouseDown($event, column) }
on-click={ ($event) => this.handleClick($event, column) } on-click={ ($event) => this.handleClick($event, column) }
class={ [column.id, column.order, column.headerAlign, column.className || '', rowIndex === 0 && this.isCellHidden(cellIndex) ? 'is-hidden' : '', !column.children ? 'is-leaf' : ''] }> class={ [column.id, column.order, column.headerAlign, column.className || '', rowIndex === 0 && this.isCellHidden(cellIndex) ? 'is-hidden' : '', !column.children ? 'is-leaf' : ''] }>
<div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }> <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }>
{ {
column.renderHeader column.renderHeader
? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context }) ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
: column.label : column.label
} }
{ {
column.sortable column.sortable
? <span class="caret-wrapper"> ? <span class="caret-wrapper">
<i class="sort-caret ascending" on-click={ ($event) => this.handleHeaderClick($event, column, 'ascending')}></i> <i class="sort-caret ascending" on-click={ ($event) => this.handleHeaderClick($event, column, 'ascending')}></i>
<i class="sort-caret descending" on-click={ ($event) => this.handleHeaderClick($event, column, 'descending')}></i> <i class="sort-caret descending" on-click={ ($event) => this.handleHeaderClick($event, column, 'descending')}></i>
</span> </span>
: '' : ''
} }
{ {
column.filterable column.filterable
? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span> ? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span>
: '' : ''
} }
</div> </div>
</th> </th>
) )
} }
{ {
!this.fixed && this.layout.gutterWidth !this.fixed && this.layout.gutterWidth
? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th> ? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th>
: '' : ''
} }
</tr> </tr>
) )
} }
</thead> </thead>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment