🏁 酷库 - iview

SLYLXDYMJ

字数：243 字

时长：1 分钟

项目中一直用的 iview，这里记录下使用心得

select 组件实现前端别名筛选

思路：利用隐藏文本的形式使指定文本参与 filterable 内置筛选
注意，i-option 中必须是未包裹元素的字符串才可以参与筛选

例子如下：

<i-select filterable>
  <i-option>
    可以参与筛选的内容1
    
    <!-- 这里可以加个后缀之类的，不会参与筛选 -->
    <span>不可以参与筛选的字符串</span>
    
    <!-- 这里 br 不要删除，是配合 CSS 实现隐藏的搜索别名的 -->
    <br><br><br>
    
    <!-- 隐藏的参与筛选的文本内容 -->
    可以参与筛选的内容2
    可以参与筛选的内容3
    可以参与筛选的内容4
  </i-option>
</i-select>

/* 隐藏 br 标签之后的文本内容 */
.ivu-select-item {
  max-height: 30px;
  max-width: 200px;
  overflow: hidden;
}