VUE_iview_在table上添加气泡提示

【表格中添加提示】

当表格内容过多时,用"…"表示,鼠标移上后显示详细信息
在这里插入图片描述

<Table stripe :data="pagelist1" :columns="newtableColumns1" border :loading="loading" ref="table"></Table>
this.newtableColumns1.push({
		width: '120',
		key: 'key',
		title: 'objtitle',
		align: 'center',  
		tooltip: "false",  //关键
	})

【表头添加提示】
在这里插入图片描述

this.newtableColumns1.push({
	width: '120',
	key: res.data.newuserjdbc[i].field_en,
	title: objtitle,
	align: 'center',
	tooltip: "false",
	renderHeader: (h, params) => {
			if (this.newuserjdbc[params.index].datalist != null) {  //判断是否有提示内容
					return h('Poptip', {
							props: {
										trigger: 'hover',
										placement: 'bottom'
									}
								},
								[
									h('span', params.column.title),
									h('div', {
											'class': {
												'custom-tooltip-content': true
											},
											slot: 'content'
										},
										[
											h('ul', this.newuserjdbc[params.index].datalist.map(item => {
												return h('li', {
													style: {
														textAlign: 'center',
														padding: '4px'
													}
												}, item.data_content == undefined ? '' : item.data_content + ':' + item.data_mess)
											}))
										]
									)
								]
							)
						} else {
							return h('Poptip', {}, [
								h('span', params.column.title),
								h('div', {
										'class': {
											'custom-tooltip-content': true
										},
										slot: 'content'
									}
								)
							])
						}
					},
				});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值