Table Column add tooltip prop

梁灏
1 parent d9d1dbbd
Showing 3 changed files with 34 additions and 7 deletions Show diff stats
examples/routers/table.vue
src/components/table/cell.vue
src/styles/components/table.less
 <template>
     <div>
-        <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
+        <Table ref="currentRowTable" :columns="columns3" :data="data1"></Table>
         <Button @click="handleClearCurrentRow">Clear</Button>
     </div>
 </template>
@@ -27,20 +27,21 @@
                     },
                     {
                         title: 'Address',
-                        key: 'address'
+                        key: 'address',
+                        tooltip: true
                     }
                 ],
                 data1: [
                     {
                         name: 'John Brown',
                         age: 18,
-                        address: 'New York No. 1 Lake Park',
+                        address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
                         date: '2016-10-03'
                     },
                     {
                         name: 'Jim Green',
                         age: 24,
-                        address: 'London No. 1 Lake Park',
+                        address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
                         date: '2016-10-01'
                     },
                     {
@@ -5,7 +5,14 @@
             <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
         <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
-        <template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
+        <template v-if="renderType === 'normal'">
+            <template v-if="column.tooltip">
+                <Tooltip transfer :content="row[column.key]" :disabled="!showTooltip" :max-width="300" class="ivu-table-cell-tooltip">
+                    <span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
+                </Tooltip>
+            </template>
+            <span v-else>{{row[column.key]}}</span>
+        </template>
         <template v-if="renderType === 'expand' && !row._disableExpand">
             <div :class="expandCls" @click="toggleExpand">
                 <Icon type="ios-arrow-forward"></Icon>
@@ -23,10 +30,11 @@
     import Cell from './expand';
     import Icon from '../icon/icon.vue';
     import Checkbox from '../checkbox/checkbox.vue';
+    import Tooltip from '../tooltip/tooltip.vue';
     export default {
         name: 'TableCell',
-        components: { Icon, Checkbox, Cell },
+        components: { Icon, Checkbox, Cell, Tooltip },
         props: {
             prefixCls: String,
             row: Object,
@@ -45,7 +53,8 @@
             return {
                 renderType: '',
                 uid: -1,
-                context: this.$parent.$parent.$parent.currentContext
+                context: this.$parent.$parent.$parent.currentContext,
+                showTooltip: false,  // 鼠标滑过overflow文本时，再检查是否需要显示
             };
         },
         computed: {
@@ -78,6 +87,13 @@
             },
             handleClick () {
                 // 放置 Checkbox 冒泡
+            },
+            handleTooltipIn () {
+                const $content = this.$refs.content;
+                this.showTooltip = $content.scrollWidth > $content.offsetWidth;
+            },
+            handleTooltipOut () {
+                this.showTooltip = false;
             }
         },
         created () {
@@ -158,6 +158,16 @@
             text-overflow: ellipsis;
         }
+        &-tooltip{
+            width: 100%;
+            &-content{
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
         &-with-expand{
             height: 47px;
             line-height: 47px;