vue+elementUI表格关键字筛选高亮

最新推荐文章于 2024-08-20 09:45:52 发布

木子Leo

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量9.8k

点赞数 8

分类专栏： vue 文章标签： vue elementui表格 element-ui表格筛选高亮

本文链接：https://blog.csdn.net/zuorishu/article/details/80899398

版权

本文展示了如何在Vue项目中结合ElementUI组件库，实现表格数据的筛选功能，并对筛选关键字进行高亮显示。通过监听输入框的搜索关键字，动态过滤表格数据，并使用模板方法修改表格单元格内容，将匹配到的关键字用特定颜色突出显示。

摘要由CSDN通过智能技术生成

  代码： 
 
 
  < 
  template 
  > 
 
 
      < 
  div 
  class= 
  "" 
  > 
 
 
          < 
  div 
  class= 
  "top" 
  > 
 
 
          <!-- 筛选 --> 
 
 
              < 
  div 
  class= 
  "screen" 
  > 
 
 
                  < 
  div 
  style= 
  "width:30%" 
  >筛选： 
  </ 
  div 
  > 
 
 
                  < 
  el-input 
  type= 
  "search" 
  v-model="search" 
  style= 
  "width:70%" 
  placeholder= 
  "请输入关键字" 
  ></ 
  el-input 
  > 
 
 
              </ 
  div 
  > 
 
 
          </ 
  div 
  > 
 
 
          <!-- 表格 --> 
 
 
          < 
  div 
  class= 
  "table" 
  > 
 
 
              < 
  el-table 
 