ElementUI中table使用render/jsx渲染

您所在的位置：网站首页 › elementui中table表格渲染 › ElementUI中table使用render/jsx渲染

ElementUI中table使用render/jsx渲染

2023-09-10 09:25| 来源: 网络整理| 查看: 265

在使用elemenUI的table的时候,为了项目的样式统一我对tabel进行了简单的封装, 主要通过传入data以及columns来渲染table.

通过if判断el-table-column的类型,但是有时候碰见复杂的需求,这种方式是不现实的,因为我们不可能去判断所有的类型. 这个时候用render/jsx去插入slot的方式渲染就再合适不过了.

image.png

比如这种需求, 渲染一个label + 一个icon + 一个弹出框, 弹出框内容是根据当前行的数据渲染出来对的.

// 在循环column的时候判断类型是否是render类型, 如果是则执行renderToHtml方法, // renderToHtml方法是在当前实例插入slot,具名slot的名称对应循环中的名称 {{ renderToHtml(col, scope.row) }} // 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 - } if (Number(row.taskStatus) === 172004 && k[1].length > 4) { return {k[0]} {k[1].substring(0, 4)} {k[1]} ... } return {k[0]} {k[1]} }, // 原生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 } }) }) ) },

【本文地址】

ElementUI中table使用render/jsx渲染

ElementUI中table使用render/jsx渲染

今日新闻

推荐新闻