vue+iview或element----table内容超出显示点

一、elementUI处理方式：

在column上增加:show-overflow-tooltip="true"或show-overflow-tooltip都可以

<el-table-column prop="YYY" label="XXX" min-width="150" align="center" show-overflow-tooltip />
<el-table-column prop="YYY" label="XXX" min-width="100" align="center" :show-overflow-tooltip="true">
	<template slot-scope="{row}">
		<el-button type="text" @click="getWeChatProof(row)">{{ row.KKK}}</el-button>
	</template>
</el-table-column>

效果图如下：自己项目没启动，借用了https://blog.csdn.net/milijiangjun/article/details/108647940 的图片

二、iviewUI处理方式：

render: (h, params) => {
let reason = params.row.reason
	return h('div', [
		h('span', {
			style: {
				display: 'inline-block',
				width: '100%',
				overflow: 'hidden',
				textOverflow: 'ellipsis',
				whiteSpace: 'nowrap'
			},
			domProps: {
				title: reason
			}
		}, reason == 'null' ? '' : reason)
	])
}

效果图如下：

带换行，将标点符号“,”替换为br

{
	title: "部门权限",
	key: "deptNameStr",
	// align: "center",
	width: 300,
	render: (h, params) => {
		let detail = params.row.bizNameStr;
		let startDetail;
		let showLen = 30;
		if (null != detail && detail.length> showLen){
			startDetail = detail.slice(0,showLen) + '...';
		} else {
			startDetail = detail;
		}
		return h('Tooltip', {
			props: { placement: 'top' ,transfer:true,maxWidth:'900'}
		}, [
			startDetail,
			h('span', { slot: 'content', 
					style: { whiteSpace: 'normal', wordBreak: 'break-all',maxWidth:'500px' } ,
					domProps: {innerHTML: detail.replace(new RegExp(',','g'),"<br/>")}}
			,null)
		])
	}
}

{
	title:'XXX',
	key:'leaveCause',
	align:'center',
	width: 300,
	render: (h, params) => {
		let text = params.row.leaveCause;
		let startText;
		let showLen = 22;
		if (null != text && text.length> showLen){
			startText = text.slice(0,showLen) + '...';
		} else {
			startText = text;
		}
		return h('Tooltip', {
			props: { placement: 'top' ,transfer:true}
		}, [
			startText,
			h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }
				,text)
		])
	}
}