javascript - 在vue中, 怎么使用render函数实现关键字高亮?

问题描述

问 题

环境, vue iview table组件
目标, 高亮一段内容中的部分关键字.

尝试
1,
操作:从后台拿到数据库迭代, 替换对应的关键字.
结果, 可以高亮, 但是其他用到data的地方也会跟着变.

2,
操作,使用render 函数在table中替换
结果, 显示代码不现实高亮

render 这么写的.

{
            title: '联系邮箱',
            key: 'email',
            render: (h, params) => {
              return h('span', {
               
              }, params.row.email.replace("test", '<span style="background: #ffff00;">test</span>'));
            }
          },

显示如下:

问题, 怎么使用render 实现其中test高亮显示.

解决方案

Vue Render函数 dataObject 描述

{
            title: '联系邮箱',
            key: 'email',
            render: (h, params) => {
              return h('span', {
                domProps: {
                  innerHTML: params.row.email.replace("test", '<span style="background: #ffff00;">test</span>')
                }
              });
            }
          },

这篇关于javascript - 在vue中, 怎么使用render函数实现关键字高亮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！