实习随笔【借助 iview table 实现搜索命中高亮】

   与后端约定好命中的关键词用span标签包裹，前端拿到数据后利用正则表达式匹配并为其添加高亮类。

实现效果：

                           

实现方案：

1、准备正则转换函数

highLightSearchTermByHint(contentArg) {
          let content = contentArg;
          content = content.replace(/<span>([^<>]*)<\/span>/g, '<span class="high-light-log-detail">$1</span>');
          return content;
}

2、准备高亮类

.high-light-log-detail{
    background: rgba(87, 163, 243);
}

3、table 组件 render 函数渲染

{
            title: '关键词',
            // TODO 可能需要加key
            minWidth: 200,
            render: (h, params) => {
                // TODO message 改成入参
                const highlightedContent = this.highLightSearchTermByHint(params.row.address);
                return h('Tooltip', {
                    props: {
                        // content: highlightedContent,
                        placement: 'top',
                        maxWidth: 400,
                        transfer: true, // 【解决不能完全显示的bug】
                    },
                }, [
                    h('div', {
                        style: {
                            maxWidth: '300px', // 控制最大宽度
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                        },
                        domProps: {
                            innerHTML: highlightedContent,
                        },
                    }),
                    // 使用插槽，自定义Tooltip样式
                    h('div', {
                        slot: 'content', // 指定内容为插槽
                        domProps: {
                            innerHTML: highlightedContent
                        }
                    }),
                ]);
            },
        },

附完整代码：

<template>
  <Table border width="800" :columns="columns7" :data="data6"></Table>
</template>

<script>
  export default {
    data () {
      return {
        columns7: [
          {
            title: 'Name',
            key: 'name',
            render: (h, params) => {
              return h('div', params.row.name);
            }
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: '关键词',
            // TODO 可能需要加key
            minWidth: 200,
            render: (h, params) => {
                // TODO message 改成入参
                const highlightedContent = this.highLightSearchTermByHint(params.row.address);
                return h('Tooltip', {
                    props: {
                        // content: highlightedContent,
                        placement: 'top',
                        maxWidth: 400,
                        transfer: true, // 【解决不能完全显示的bug】
                    },
                }, [
                    h('div', {
                        style: {
                            maxWidth: '300px', // 控制最大宽度
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                        },
                        domProps: {
                            innerHTML: highlightedContent,
                        },
                    }),
                    // 使用插槽，自定义Tooltip样式
                    h('div', {
                        slot: 'content', // 指定内容为插槽
                        domProps: {
                            innerHTML: highlightedContent
                        }
                    }),
                ]);
            },
        },
          {
            title: 'Action',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, 'View'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, 'Delete')
              ]);
            }
          }
        ],
        data6: [
          {
            name: 'John Brown',
            age: 18,
            address: '<span>2020</span>-<span>08</span>-<span>14</span> <span>15</span>:<span>25</span>:<span>New York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake Park'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'Ottawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkLondon No. 1 Lake ParkNew York No. 1 Lake Park'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Ottawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkSydney No. 1 Lake ParkNew York No. 1 Lake Park'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkOttawa No. 2 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake Park'
          }
        ]
      }
    },
    methods: {
      show (index) {
        this.$Modal.info({
          title: 'User Info',
          content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
        })
      },
      remove (index) {
        this.data6.splice(index, 1);
      },
      highLightSearchTermByHint(contentArg) {
          let content = contentArg;
          content = content.replace(/<span>([^<>]*)<\/span>/g, '<span class="high-light-log-detail">$1</span>');
          return content;
      }
    }
  }
</script>
<style>
.high-light-log-detail{
    background: rgba(87, 163, 243);
}
</style>