通过RegExp实现 element UI tree 高亮显示(样式改变)搜索框过滤内容

10 篇文章 0 订阅
3 篇文章 0 订阅

        通过RegExp对象动态的实现字体样式的添加与删除。
element UI 中,树形控件进行过滤操作时,经常要求所搜字体进行一个高亮显示。

        树形控件中提供了一个Attributes(属性) : filter-node-method 

解释为:对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏。

效果如下:

        

 现对其进行高亮显示:(所搜索字体变红)

用正则表达式来实现该功能。

关键代码:

          // 高亮过滤文本
          if(filterText){
            data.displayName = data.displayName.replace(
              new RegExp(filterText, 'gi'),
              `<span style="color: red" >$&</span>`,
            )
          }

将标签插入到dom中,得是这种形式:

<span v-html="`${node.label}`"></span>

所以在el-tree标签中,插入了 <template slote-scope = "{node}" ></template> 

如果用插值表达式:

<span>{{ node.label }}</span>

插入的span标签会被当做字符串处理的,不可用。

全部代码:

<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
    >
      <template slot-scope="{ node}">
                <div>
                  <span v-html="`${node.label}`"></span>
                   <!-- <span>{{ node.label }}</span> -->
                </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filterText: '',
      data: [
        {
          id: 1,
          displayName: '美食',
          children: [
            {
            id: 1-1,
            displayName: '怀安豆腐皮',
            },
            {
            id: 1-2,
            displayName: '正定八大碗',
            },
            {
            id: 1-3,
            displayName: '承德荞面饸饹荞面',
            },
            {
            id: 1-4,
            displayName: '张家口蔚县黄糕',
            },

          ]
        },
        {
          id:2,
          displayName:'景点',
          children:[
            {
            id: 2-1,
            displayName: '石家庄佛光山景区',
            },
            {
            id: 2-2,
            displayName: '承德避暑山庄',
            },
            {
            id: 2-3,
            displayName: '保定狼牙山景区',
            },
            {
            id: 2-4,
            displayName: '张家口黄帝城文化旅游区',
            },
          ]
        }
        ],
        defaultProps: {
          children: 'children',
          label: 'displayName'
        }
    };
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
  },
  methods: {
      filterNode(value, data, node) {
        if (data.children) {
          node.expanded = true
          return true
        }
        const { filterText } = this
        // 根据标签名称进行过滤
        if (
          data.displayName.toUpperCase().includes(filterText.toUpperCase())
        ) {
          // 高亮过滤文本
          if(filterText){
            data.displayName = data.displayName.replace(
              new RegExp(filterText, 'gi'),
              `<span style="color: red" >$&</span>`,
            )
          }
          return true
        }
          return false
      },
  },
};
</script>
data.oldName?(data.displayName = data.oldName):(data.oldName = data.displayName)

 这一句也很重要,目的是动态取消添加样式后的字体。

效果:


 

结束。

  • 12
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
实现搜索高亮显示元素,可以使用以下代码: 在getList()查询事件中添加以下代码: ```javascript // 获取搜索框和表格元素 const searchInput = this.queryParams.name; const table = document.querySelector('#data-table'); // 监听搜索框输入事件 searchInput.addEventListener('input', () => { // 获取搜索关键字 const keyword = searchInput.value.trim().toLowerCase(); // 如果搜索关键字为空,移除所有高亮样式 if (!keyword) { table.querySelectorAll('.highlight').forEach(el => { el.classList.remove('highlight'); }); return; } // 遍历表格中的每个单元格 table.querySelectorAll('td').forEach(td => { // 获取单元格文本内容 const cellText = td.textContent.trim().toLowerCase(); // 如果单元格内容包含搜索关键字,添加高亮样式 if (cellText.includes(keyword)) { // 将匹配到的关键字替换为带有高亮样式的文本 const highlightedText = cellText.replace(new RegExp(keyword, 'gi'), match => `<span class="highlight">${match}</span>`); td.innerHTML = highlightedText; } else { // 移除高亮样式 td.innerHTML = cellText; } }); }); ``` 这段代码会监听搜索框的输入事件,获取搜索关键字,并遍历表格中的每个单元格。如果单元格内容包含搜索关键字,会将匹配到的关键字替换为带有高亮样式的文本,否则移除高亮样式。这样就可以实现搜索高亮显示元素。\[1\] #### 引用[.reference_title] - *1* [vue 若依 element 搜索框搜索出来的关键字 高亮处理](https://blog.csdn.net/qq_43770056/article/details/130168275)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [通过RegExp实现 element UI tree 高亮显示(样式改变)搜索框过滤内容](https://blog.csdn.net/m0_62021563/article/details/125478009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天命爱心职责~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值