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'
									}
								)
							])
						}
					},
				});

猜你喜欢

转载自blog.csdn.net/weixin_42547014/article/details/107661933