web搜索框关键字颜色高亮渲染

最新推荐文章于 2023-07-16 15:31:26 发布

原创最新推荐文章于 2023-07-16 15:31:26 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Web搜索框中实现关键字高亮渲染，通过JavaScript和CSS技术，动态地将用户输入的搜索关键字在结果显示中突出显示，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
                                title: "资质編碼",
                                key: "code",
                                width: "280px",
                                render: (h, params) => {
                                    // console.log(params)
                                    // console.log(params.row.id)
                                    // console.log(params.row.status_test)
                                    // 点击修改前
                                    if (params.row.status_test == 0) {
                                        let input = this.input_data3;
                                        if (input.length == 0) {
                                            return h('div'), [
                                                h('span', {}, params.row.code),
                                            ]
                                        }
                                        else {
                                            return h('span',
                                                {
                                                    domProps: {
                                                        innerHTML: params.row.code.replace(input, '<span style="background: #ffff00;">'+input+'</span>')
                                                    }
                                                });
                                        }
                                    }

render:(h,params)=>{
   return h('span',
    {
   domProps: {
 innerHTML: params.row.jz.replace(this.input_data3, 
'<span style="background: #ffff00;">'+this.input_data3+'</span>')
                            }
                        });
                }