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

Question

环境, 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高亮显示.

Answer 1

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>')
                }
              });
            }
          },

Answer 2

如下实现的北京替换为龙泉高亮显示

        render: (h, params) => {
          const address = params.row.address;
          const splitArr = address.split(/(北京)/);
          const nodes = splitArr.map((currentValue) => {
            if (currentValue === '北京') {
              return h('span', {
                style: {
                  background: '#ffff00'
                }
              }, '龙泉');
            }
            return currentValue;
          });
          return h('div', nodes);
        }
      },

代码示例: https://github.com/huixisheng... 偷懒了下，demo直接拷贝iview官网修改的

Answer 3

你这样的写法只是将test替换成后面的一堆字符串, 就像原生dom API中的 .text 与 .html 这样。
但在MVVM框架中要禁止这样的操作。

应该使用v-bind属性绑定class, 渲染交给vue去操作. 你只需要管理test的高亮状态就好了。

h('span', {
    class: {
        height: this.isHeight  //只控制isHeight的状态
    }
}, this.content)