iview table render 自定义换行并tooltip提示

项目中产品要求所有表格都不能换行，但表格中有个别字段是根据后端返回字段固定展示文字，由于文字过长，虽然使用 ellipsis: true 可以超出隐藏，但鼠标放上不会 tooltip 提示

如果是简单的单行显示不下就用 … 并且Tooltip提示，自带的就可以实现了

columns: [
	{
	     title: "触发类型",
	     key: "warningName", // 后台返回字段，超出展示...
	     align: "center",
	     minWidth: 90,
	      tooltip: "true",//鼠标移上去Tooltip提示
	 }
]

使用render自定义文字就不起作用了，经百度查找，现将方法总结如下：

columns: [
	{
	      title: "触发类型",
	      key: "warningName", // 后台返回字段，超出展示...
	      align: "center",
	      minWidth: 90,
	     
		   //首先需要注释以下两个属性
	       //tooltip: "true",//鼠标移上去Tooltip提示
	       //ellipsis: true, //如果是 true 需要注释
			render: (h, params) => h('tooltip', {
				props: {
					placement: 'bottom', // tooltip展示位置
					transfer: true,
					content: params.row.warningName // 展示内容
				}
			}, [
				h("span", {
					style: {
						textOverflow: 'ellipsis',
						whiteSpace: 'normal',
						overflow: 'hidden',
						display: '-webkit-box',
						webkitBoxOrient: 'vertical',
						webkitLineClamp: '1'  // 最多显示多少行
					}
				}, params.row.warningName // 展示内容 )
			]),
	 }
]

效果图：