Table Column add tooltip prop
This commit is contained in:
parent
d9d1dbbd5a
commit
8c51d57dca
3 changed files with 34 additions and 7 deletions
|
@ -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 () {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue