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="jack">
          Jack
        </a-select-option>
        <a-select-option value="lucy">
          Lucy
        </a-select-option>
        <a-select-option value="tom">
          Tom
        </a-select-option>
      </a-select>
    </template>
    <script>
    export default {
      methods: {
        handleChange(value) {
          console.log(`selected ${value}`);
        },
        handleBlur() {
          console.log('blur');
        },
        handleFocus() {
          console.log('focus');
        },
        filterOption(input, option) {
          return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          );
        },
      },
    };
    </script>

    参考: https://www.antdv.com/components/select-cn/#Select-

    下拉框做校验(配合from表单的 没有试过 )

    <a-select
    show-search
    placeholder="请选择对应host"
    option-filter-prop="children"
    :filter-option="filterOption"

    v-decorator="[
    'st_host',
    {
    rules: [{ required: true, message: '输入对应的host',trigger:'blur' }],
    },
    ]"
     
    style=" 100%"
    >
  • 相关阅读:
    A promise tomorrow is worth a lot less than trying today.
    时间相关函数
    JAVA中日期格式转换各个字母代表含义
    参考链接
    修饰器
    最新提案
    ArrayBuffer
    读懂 ECMAScript 规格
    使用markdown写博客
    linux系统界面转换
  • 原文地址:https://www.cnblogs.com/kaibindirver/p/13703183.html
Copyright © 2011-2022 走看看