在使用elemenUI的table的时候,为了项目的样式统一我对tabel进行了简单的封装, 主要通过传入data以及columns来渲染table.
<el-table
ref="table"
highlight-current-row
tooltip-effect="dark"
:align="options.align"
:row-style="options.rowStyle"
:data="tableData"
style="width: 100%"
>
<template v-for="(col, i) in columns">
<el-table-column
:prop="col.key"
:key="col.key + i"
:label="col.label"
:width="col.width"
:align="options.align"
:fixed="col.fixed"
:show-overflow-tooltip="col.showOverflowTooltip"
>
<template slot-scope="scope">
<span v-if="col.type === 'select'">
<el-checkbox
v-if="scope.row.canReallocate"
:label="scope.row.id"
@change="handleCheckedCitiesChange"
>
<span
:style="{color: setColor(col, scope.row)}"
>{{customText(col, scope.row)}}</span>
</el-checkbox>
通过if判断el-table-column的类型,但是有时候碰见复杂的需求,这种方式是不现实的,因为我们不可能去判断所有的类型. 这个时候用render/jsx去插入slot的方式渲染就再合适不过了.
image.png
比如这种需求, 渲染一个label + 一个icon + 一个弹出框, 弹出框内容是根据当前行的数据渲染出来对的.
<!-- renderHtml -->
// 在循环column的时候 判断类型是否是render类型, 如果是则执行renderToHtml方法,
// renderToHtml方法是在当前实例插入slot,具名slot的名称对应循环中的名称
<span v-else-if="col.type === 'renderHtml'">
{{ renderToHtml(col, scope.row) }}
<slot :name="col.renderName"></slot>
</span>
// slot - renderToHtml
renderToHtml(col, row) {
if (typeof col.render === 'function') {
this.$slots[col.renderName] = [col.render(row)]
return
}
return
}
我们在初始化columns的时候声明类型,以及render函数, 返回VNode节点.
image.png
// 此处是jsx写法
// 我们可以很简单的在此处根据不同的条件,定义出不同的样式
renderHtml(h, row) {
const label = row.label
const k = label.split(',')
k[1] = k[1].replace(/\|/g, ',')
let color = '#2c2e3e'
if (Number(row.taskStatus) === 172006) {
color = '#EC3F30'
}
if (!row.label) {
return <span>-</span>
}
if (Number(row.taskStatus) === 172004 && k[1].length > 4) {
return <div>
<span style={{ color: color }}>{k[0]}</span>
<span style={{ marginLeft: '5px', color: '#929AAC' }}>{k[1].substring(0, 4)}</span>
<el-tooltip effect='light' placement='top'>
<div slot='content'>{k[1]}</div>
<span style={{ color: '#929AAC' }}>...</span>
</el-tooltip>
</div>
}
return <div>
<span style={{ color: color }}>{k[0]}</span>
<span v-show={k[1]} style={{ marginLeft: '5px', color: '#929AAC' }}>{k[1]}</span>
</div>
},
// 原生vue的render写法, 同样有这种效果
render(row) {
// computeType integer($int32)
// 1：剩余天数，2：里程,3：厚度，4：到期时间
// allotType integer($int32)
// 分配对象 1:对应SA，2：招揽专员
// satisfyAllConditions string
// 是否满足所有条件(1:是,2:否 满足任意一个)
// kpiItemBaseId
const s = []
if (row.satisfyAllConditions === 1) {
s.push({
title: '同时满足'
})
} else {
s.push({
title: '满足任意一个'
})
}
row.conditions.length && row.conditions.forEach(v => {
if (v.computeType === 1) {
s.push(['剩余天数', `${v.minVal}-${v.maxVal}天`, v.kpiName])
}
if (v.computeType === 2) {
s.push(['剩余里程', `${v.minVal}-${v.maxVal}KM`, v.kpiName])
}
if (v.computeType === 3) {
s.push(['剩余厚度', `${v.minVal}-${v.maxVal}mm`, v.kpiName])
}
if (v.computeType === 4) {
s.push(['到期时间', `${moment(v.minVal).format('YY/MM/DD')} - ${moment(v.maxVal).format('YY/MM/DD')}`, v.kpiName])
}
})
if (row.allotType === 1) {
s.push({
title: '对应SA'
})
} else {
s.push({
title: '招揽专员'
})
}
let _dom, _style, _innerText, _class
return this.$createElement(
'div', s.map((keys, i) => {
if (i === 0) {
_dom = 'i'
_innerText = ` ${keys.title}`
_class = 'el-icon-refresh'
_style = {
fontSize: '12px',
color: '#2C2E3E',
display: 'block'
}
} else if (Array.isArray(keys)) {
_dom = 'div'
_innerText = `${keys[2]}: ${keys[0]} ${keys[1]}`
_class = ''
} else {
_dom = 'div'
_innerText = `分配对象 : ${keys['title']}`
_class = ''
}
if (i === 0) {
_style = {
fontSize: '12px',
fontWeight: '600',
color: '#2C2E3E',
margin: '5px 0',
fontFamily: 'PingFangSC-Medium,PingFang SC'
}
} else if (i === s.length - 1) {
_style = {
fontSize: '12px',
fontWeight: '400',
color: '#2C2E3E',
marginTop: '10px',
fontFamily: 'PingFangSC-Medium,PingFang SC'
}
} else {
_style = {
fontSize: '12px',
fontWeight: '400',
color: '#2C2E3E',
margin: '3px 0',
fontFamily: 'PingFangSC-Medium,PingFang SC'
}
}
return this.$createElement(_dom, {
class: _class,
style: _style,
domProps: {
innerHTML: _innerText
}
})
})
)
},
