chenhaodong / mew-iview

Commit 8c51d57dca1b0ef77cf441cb839d12e4fa4ac619

Authored by 梁灏
1 parent d9d1dbbd

Table Column add tooltip prop

Showing 3 changed files with 34 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @8c51d57
1 1 <template>
2 2 <div>
3   - <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
  3 + <Table ref="currentRowTable" :columns="columns3" :data="data1"></Table>
4 4 <Button @click="handleClearCurrentRow">Clear</Button>
5 5 </div>
6 6 </template>
... ... @@ -27,20 +27,21 @@
27 27 },
28 28 {
29 29 title: 'Address',
30   - key: 'address'
  30 + key: 'address',
  31 + tooltip: true
31 32 }
32 33 ],
33 34 data1: [
34 35 {
35 36 name: 'John Brown',
36 37 age: 18,
37   - address: 'New York No. 1 Lake Park',
  38 + address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
38 39 date: '2016-10-03'
39 40 },
40 41 {
41 42 name: 'Jim Green',
42 43 age: 24,
43   - address: 'London No. 1 Lake Park',
  44 + address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
44 45 date: '2016-10-01'
45 46 },
46 47 {
... ...
src/components/table/cell.vue
  Show/Hide comments   View file @8c51d57
... ... @@ -5,7 +5,14 @@
5 5 <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
6 6 </template>
7 7 <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
8   - <template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
  8 + <template v-if="renderType === 'normal'">
  9 + <template v-if="column.tooltip">
  10 + <Tooltip transfer :content="row[column.key]" :disabled="!showTooltip" :max-width="300" class="ivu-table-cell-tooltip">
  11 + <span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
  12 + </Tooltip>
  13 + </template>
  14 + <span v-else>{{row[column.key]}}</span>
  15 + </template>
9 16 <template v-if="renderType === 'expand' && !row._disableExpand">
10 17 <div :class="expandCls" @click="toggleExpand">
11 18 <Icon type="ios-arrow-forward"></Icon>
... ... @@ -23,10 +30,11 @@
23 30 import Cell from './expand';
24 31 import Icon from '../icon/icon.vue';
25 32 import Checkbox from '../checkbox/checkbox.vue';
  33 + import Tooltip from '../tooltip/tooltip.vue';
26 34  
27 35 export default {
28 36 name: 'TableCell',
29   - components: { Icon, Checkbox, Cell },
  37 + components: { Icon, Checkbox, Cell, Tooltip },
30 38 props: {
31 39 prefixCls: String,
32 40 row: Object,
... ... @@ -45,7 +53,8 @@
45 53 return {
46 54 renderType: '',
47 55 uid: -1,
48   - context: this.$parent.$parent.$parent.currentContext
  56 + context: this.$parent.$parent.$parent.currentContext,
  57 + showTooltip: false, // 鼠标滑过overflow文本时，再检查是否需要显示
49 58 };
50 59 },
51 60 computed: {
... ... @@ -78,6 +87,13 @@
78 87 },
79 88 handleClick () {
80 89 // 放置 Checkbox 冒泡
  90 + },
  91 + handleTooltipIn () {
  92 + const $content = this.$refs.content;
  93 + this.showTooltip = $content.scrollWidth > $content.offsetWidth;
  94 + },
  95 + handleTooltipOut () {
  96 + this.showTooltip = false;
81 97 }
82 98 },
83 99 created () {
... ...
src/styles/components/table.less
  Show/Hide comments   View file @8c51d57
... ... @@ -158,6 +158,16 @@
158 158 text-overflow: ellipsis;
159 159 }
160 160  
  161 + &-tooltip{
  162 + width: 100%;
  163 + &-content{
  164 + display: block;
  165 + overflow: hidden;
  166 + text-overflow: ellipsis;
  167 + white-space: nowrap;
  168 + }
  169 + }
  170 +
161 171 &-with-expand{
162 172 height: 47px;
163 173 line-height: 47px;
... ...