From eb713f80e6f02136987676ec426d58c22c59648f Mon Sep 17 00:00:00 2001 From: Leopoldthecoder <Leopoldthecuber@gmail.com> Date: Fri, 26 Aug 2016 14:01:14 +0800 Subject: [PATCH] update custom background table --- examples/docs/table.md | 6 +++--- packages/table/src/table-body.js | 28 +++++++++++++++++++++++----- packages/table/src/table.vue | 5 ++++- packages/theme-default/src/table.css | 16 ---------------- 4 files changed, 30 insertions(+), 25 deletions(-) diff --git a/examples/docs/table.md b/examples/docs/table.md index b3525db33..59f5998e1 100644 --- a/examples/docs/table.md +++ b/examples/docs/table.md @@ -248,9 +248,9 @@ ## 带状态表格 -通过在`data`对象数组中加入字段,可以给行加上状态,Element 提供了四种状态:`$positive`、`$info`、`$warning`以及`$negative`,在对象新增字段中把状态设为`true`表示启用该状态。 +可以为行添加自定义背景色,表明该行处于某种状态。若某一行拥有`custom-criteria`数组中的某个字段且值为`true`,则为该行添加`custom-background-colors`数组中对应的背景色。 -<el-table :data="tableData2" style="width: 520px"> +<el-table :data="tableData2" style="width: 520px" :custom-criteria="['$info', '$positive']" :custom-background-colors="['#C9E5F5', '#E2F0E4']"> <el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> @@ -258,7 +258,7 @@ ```html <template> - <el-table :data="tableData2"> + <el-table :data="tableData2" :custom-criteria="['$info', '$positive']" :custom-background-colors="['#C9E5F5', '#E2F0E4']"> <el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index 5e868ddf0..a48fde6fc 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -43,13 +43,10 @@ export default { <tr on-click={ ($event) => this.handleClick($event, row) } on-mouseenter={ _ => this.handleMouseEnter($index) } + style={ this.getCustomStyle(row) } class={{ 'current-row': row === this.$parent.selected, - 'hover': this.$parent.$parent.hoverRowIndex === $index, - 'positive-row': row.$positive, - 'info-row': row.$info, - 'warning-row': row.$warning, - 'negative-row': row.$negative + 'hover': this.$parent.$parent.hoverRowIndex === $index }}> { this._l(this.columns, (column) => @@ -75,6 +72,8 @@ export default { data() { return { + criteria: this.$parent.customCriteria, + colors: this.$parent.customBackgroundColors, tooltipDisabled: true }; }, @@ -84,6 +83,25 @@ export default { }, methods: { + checkProperty(row) { + if (this.criteria && this.criteria.length > 0) { + for (let i = 0, len = this.criteria.length; i < len; i++) { + if (row[this.criteria[i]] === true) { + return i; + } + } + } + return -1; + }, + + getCustomStyle(row) { + if (!this.criteria || !this.colors || this.criteria.length !== this.colors.length) { + return {}; + } + let criterionIndex = this.checkProperty(row); + return criterionIndex > -1 ? { 'background-color': this.colors[criterionIndex] } : {}; + }, + handleCellMouseEnter(event, row) { let grid = this.$parent; const cell = getCell(event); diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 8022c8d31..e7f08492b 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -81,7 +81,10 @@ gutterWidth: { default: 0 - } + }, + + customCriteria: Array, + customBackgroundColors: Array }, components: { diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css index 74d846218..80fa409d1 100644 --- a/packages/theme-default/src/table.css +++ b/packages/theme-default/src/table.css @@ -253,22 +253,6 @@ } } - & tr.positive-row { - background: #E2F0E4; - } - - & tr.info-row { - background: #C9E5F5; - } - - & tr.warning-row { - background: #FEEED9; - } - - & tr.negative-row { - background: #F7D2D3; - } - & tr.current-row { background: #EFF7FF; }