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 就出来了