zoukankan      html  css  js  c++  java
  • 选择器(可搜索)+气泡提示组件

    <template>
    <a-select
    show-search
    placeholder="Select a person"
    option-filter-prop="children"
    style=" 200px"
    :filter-option="filterOption"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
    >
    <a-select-option
    :value="item.id"
    v-for="item in hosts"
    :key="item.id"
    >
    
    <a-tooltip placement="topLeft">
    <template slot="title">
    <span>{{ item.label }}</span>
    </template>
    {{ item.label }}
    </a-tooltip>
    </a-select-option>
    </a-select>
    </template>
    <script>
    export default {
    data() {
    return {
    hosts: [
    { label: 'aa', id: 1},
    { label: 'bb', id: 2},
    { label: 'cc', id: 3},
    ]
    }
    },
    methods: {
    handleChange(value) {
    console.log(`selected ${value}`);
    },
    handleBlur() {
    console.log('blur');
    },
    handleFocus() {
    console.log('focus');
    },
    filterOption(input, option) {
    // console.log(input)
    // console.log(option)
    return (
    console.log(option),
    option.componentOptions.children[0].componentOptions.children[1].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    );
    },
    },
    };
    </script>

    主要是这个 

    option.componentOptions.children[0].componentOptions.children[1].text.toLowerCase().indexOf(input.toLowerCase()) >= 0  应该在原来选择器的子选项中加了标签,所以获取选项的text位置有变

    样子:

  • 相关阅读:
    定时器的使用
    new LayoutParams 使用
    判断,日期是是昨天,前天 ,今天
    google推出的SwipeRefreshLayout下拉刷新用法
    Intent的Flag
    Eclipse Java注释模板设置详解
    Eclipse的模板设置代码
    Android如何在java代码中设置margin
    软键盘挡住输入框的解决方案
    Android自定义遮罩层设计
  • 原文地址:https://www.cnblogs.com/kaibindirver/p/14228867.html
Copyright © 2011-2022 走看看