在iview table表格中使用 poptip 并自定义内容展示

1. 有时候总有一些特殊需求, 需要在表格内容展示做文章

1. 在项目中遇到要再表格里添加一些特殊展示如下图
2. 这就需要使用render函数,对表格内容做一些展示修改
	1) 首先我们需要对poptip做一个内容的定制 大致如下
	<template>
	  <div>
	    <Poptip popper-class="dark" v-if="poptipShow" :class="{dark: theme ==='dark'}" v-model="visible" :transfer="transfer">
	      <Tooltip :theme="theme" v-if="showTooltip && poptipShow">
	        <div class="own-show-content finish" :class="{plan: (content.indexOf('6月') !== -1 || content.indexOf('7月') !== -1) }" >{{content}}</div>
	        <div slot="content">
	          <p v-for="(item, index) in tooltipList" :key="index">{{item}}</p>
	        </div>
	      </Tooltip>
	      <div class="own-show-content plan" v-else>{{content}}</div>
	      <div class="mark-poptip" slot="content">
	        <div class="item">
	          <span class="text">节点类别</span>
	          <Select v-model="nodeClass">
	            <Option value="运营节点">运营节点</Option>
	            <Option value="营销节点">营销节点</Option>
	            <Option value="客户控制">客户控制</Option>
	          </Select>
	        </div>
	        <div class="item">
	          <span class="text">节点内容</span>
	          <Select v-model="nodeContent">
	            <Option value="运营节点">运营节点</Option>
	            <Option value="营销节点">营销节点</Option>
	            <Option value="客户控制">客户控制</Option>
	          </Select>
	        </div>
	        <div class="item">
	          <span class="text">节点时间</span>
	          <DatePicker :value="nodeDate" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 118px; height: 24px; line-height: 24px;"></DatePicker>
	        </div>
	        <div class="button-box">
	          <button class="cancel" @click="markClose">取消</button>
	          <button class="confirm" @click="confirm">确认</button>
	        </div>
	      </div>
	    </Poptip>
	    <!--<Tooltip :theme="theme" v-if="showTooltip && !poptipShow">-->
	      <!--<div class="own-show-content finish" :class="{plan: (content.indexOf('6月') !== -1 || content.indexOf('7月') !== -1) }" >{{content}}</div>-->
	      <!--<div slot="content">-->
	        <!--<p v-for="(item, index) in tooltipList" :key="index">{{item}}</p>-->
	      <!--</div>-->
	    <!--</Tooltip>-->
	    <div class="own-show-content finish" v-else>{{content}}</div>
	  </div>
	</template>
    // 自己定义自己写的参数
    

2. 书写render函数

1. //引入定制好的poptip
	// import ownPoptip from 'xxx';
		// h 即代表 createElment
	**在表格的columns 里添加render 函数 内容相对应如下即可
		h(
		   ownPoptip, {
		     props: { // props 及传入你所写的组件的内容 (自定)
		       content: `${item.content}`,
		       nodeId: item.nodeId,
		       nodeName: item.nodeName,
		       nodeType: item.nodeType,
		       planDate: item.planDate,
		       theme: 'dark', // 可以根据UI 自定色系 * 默认 Poptip 为白色
		       transfer: true, // 是否游离body外 默认true
		       showTooltip: item.showTooltip,
		       poptipShow: item.poptipShow
		     },
		     style: { // 定义组件样式
		       cursor: 'pointer'
		     },
		     on: { // 对组件挂载方法 方法名自定
		       'update-node': (params) => {
		         this.updateTimeNode(params)
		       }
		     }
		   }
		 )

2. 组件内部可通过 this.$emit 触发挂载的函数 例如: this.$emit('函数名', '参数');

这样一个简单地在ivew的表格内展示自定一内容 poptip 就出来了