树结构 根据关键字过滤

这篇具有很好参考价值的文章主要介绍了树结构 根据关键字过滤。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

案例:

树结构 根据关键字过滤,elementui,vue.js,elementui,javascript
默认
树结构 根据关键字过滤,elementui,vue.js,elementui,javascript
过滤之后

 文章来源地址https://www.toymoban.com/news/detail-541401.html

 直接看代码:

<div
            class="grid-content bg-purple"
            style="background-color: #fff"
          >
            <p>单位列表</p>
            <!-- defaultProps :这个里面的字段要与后端返回过来的字段一致 -->
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
            >
            </el-input>
:filter-node-method="filterNode"  树结构中添加这个!!过滤 
            <el-tree
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
              node-key="ID"
              default-expand-all
              highlight-current
              :key="itemKey"
              ref="tree"
              :filter-node-method="filterNode"
            >
              <!-- vue3 插槽写法 -->
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>
                    <i class="custom_icon"></i>
                    {{ node.label }}
                  </span>
                </span></template>
            </el-tree>

          </div>

<script>
export default {
 data(){
  return:{
     treeData: [], //定义左侧树初始化
      itemKey: "", //唯一值
      selectedDictIDs: "", //左边树勾选的ID
      selectLabel: "", //左侧勾选的名称
      defaultProps: {
        //树结构绑定值
        children: "Children", //要与后端返回过来的字段一致
        label: "Text", //要与后端返回过来的字段一致
      },
      //#region 左侧单位过滤
      filterText: "", //左侧过滤
      //#endregion
   }
 }
 watch: {
    //左侧过滤
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
methods:{
   // 左侧过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.Text.indexOf(value) !== -1;
    },
 }
}
</script>

注释:

1. 用到el-tree 中的方法

树结构 根据关键字过滤,elementui,vue.js,elementui,javascript

 2.  this.$refs.tree。。。中的 "tree" 跟上面绑定的一致 

树结构 根据关键字过滤,elementui,vue.js,elementui,javascript

 

3.    data.Text    树结构 根据关键字过滤,elementui,vue.js,elementui,javascript

 

  这个Text 与defaultProps 中label字段 一致。

 

到了这里,关于树结构 根据关键字过滤的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • linux通过grep根据关键字查找日志文件上下文

    grep -C 10 keyword catalina.out 显示file文件中匹配keyword字串那行以及上下10行 grep -B 10 keyword catalina.out 显示keyword及前10行 grep -A 10 keyword catalina.out 显示keyword及后10行 grep -C 10 keyword catalina.out aaa.txt grep -o keyword catalina.out | wc -l grep -c keyword catalina.out grep -V

    2024年02月16日
    浏览(53)
  • python读取.txt文件中某些关键字后面的内容 并根据该数据画图

    感谢一下悦姐帮忙 然后画图,其实两个代码可以放在一个里面 最后贴个图:

    2024年02月09日
    浏览(42)
  • 【JS】JavaScript中的this关键字

    目录 this是什么? this的指向 ①全局环境 ②构造函数 ③对象的方法 this的四类调用方式 ①作为对象方法调用 ②纯粹的函数调用 ③作为构造函数调用 ④使用apply、call、bind调用 举例说明 JavaScript  this  指的是它所属的对象。 它拥有不同的值,具体取决于它的使用位置:

    2024年02月14日
    浏览(44)
  • js将搜索的关键字加颜色

    使用正则匹配并加入span标签,页面渲染时使用v-html渲染即可

    2024年02月11日
    浏览(44)
  • vue实现搜索高亮关键字

    模仿浏览器中ctrl+f实现搜索 高亮显示 思路: 通过ref获取dom元素 删除当前高亮色; 设置本次搜索的高亮; 进行内容替换; 为首个进行高亮,设置为当前; 关键代码: 定义一个正则 key就代表要高亮的字符串,i 代表匹配大小写 g代表全局匹

    2024年02月10日
    浏览(61)
  • Vue关键字搜索功能(小案例)

    这里介绍两种方法:1、使用watch侦听方法 2、computed计算属性方法 页面结果: 第一种 第二种 相较于watch写法,computed写法看上去更加简洁,比如: 1、computed自身就是一种计算属性,不必再去data中新建一个属性。 2、计算属性实时更新,不用像watch方法,新建的filPerson初始值为

    2024年02月06日
    浏览(64)
  • JS中var、let以及const关键字到底怎么用?

    在学习JS变量之后,初学者都避免不了都会一下子分不清这三个变量在代码块中的作用域范围,其实 const 简单理解它就是定义常量的,但是在实际开发中,我们却很常见它的身影。 说实话刚开始我也分不清他们的作用域范围,但是自己再去详细看一遍教程之后,其实发现还是

    2023年04月13日
    浏览(40)
  • js中this关键字的作用和如何改变其上下文

    一、this 的作用 JavaScript 中的 this 引用了所在函数正在被调用时的对象。在不同的上下文中, this 的指向会发生变化。 在全局上下文中, this 指向全局对象(在浏览器中是 window 对象,在 Node.js 中是 global 对象)。 在函数中, this 指向调用该函数的对象。如果该

    2024年02月07日
    浏览(39)
  • 前端面试题-js-new关键字-this指向-js事件流-防抖节流

    1.创建一个简单的空对象 2.原型的绑定,确定对象O的原型链 3.绑定this对象为O,传入参数;执行Person构造函数,进行属性和方法的赋值操作 4.返回结果 普通函数的this指向 函数的this指向有一个基本的原则,谁调用的函数,函数的this就指向谁,否则指向全局 箭头函数的this指向

    2024年01月25日
    浏览(48)
  • 如何使用ES做简单的时间条件过滤+模糊查询+精确匹配+关键字排除,查询 elasticsearch查询结果包含或排除某些字段、_source查询出需要的属性名称

    目录 一、时间条件过滤+模糊查询+精确匹配+排除 1. 查询出包含 log_geo 的数据 “wildcard”: { “message”: “log_geo” } 2. 查询某个时间段的数据 3. 条件查询与条件排除数据 4. from 表示起始的记录的ID 5. size 表示显示的记录数 6.sort排序 desc降序、asc升序  7.should查询在mysql中

    2024年01月18日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包