提交 issue修改本页

Form Select

一个支持传入数组和对象，支持多选的下拉框选择组件

传入数组或者对象值给 options prop 来生成下拉选项

<template>
  <div>
    <nly-form-select v-model="selected" :options="options"></nly-form-select>
    <nly-form-select
      v-model="selected"
      :options="options"
      size="sm"
      class="mt-3"
    ></nly-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: "请选择" },
          { value: "a", text: "第一个选项" },
          { value: "b", text: "第二个选项" },
          { value: { C: "3PO" }, text: "对象选项" },
          { value: "d", text: "禁用选项", disabled: true }
        ]
      };
    }
  };
</script>

<!-- arr and object.name -->
<!-- select.vue -->

可以对选项进行分组

<template>
  <div>
    <nly-form-select v-model="selected" :options="options"></nly-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: "请选择" },
          { value: "a", text: "第一个选项" },
          { value: "b", text: "禁用选项", disabled: true },
          {
            label: "分组选项",
            options: [
              { value: { C: "3PO" }, text: "对象选项一" },
              { value: { R: "2D2" }, text: "对象选项二" }
            ]
          }
        ]
      };
    }
  };
</script>

<!-- group.name -->
<!-- group.vue -->

使用 nly-form-select-option 组件代替 options prop

<template>
  <div>
    <nly-form-select v-model="selected" class="mb-3">
      <nly-form-select-option :value="null">请选择</nly-form-select-option>
      <nly-form-select-option value="a">选项A</nly-form-select-option>
      <nly-form-select-option value="b" disabled
        >选项B 禁用选项</nly-form-select-option
      >
      <nly-form-select-option-group label="分组选项">
        <nly-form-select-option :value="{ C: '3PO' }"
          >分组选项1</nly-form-select-option
        >
        <nly-form-select-option :value="{ R: '2D2' }"
          >分组选项2</nly-form-select-option
        >
      </nly-form-select-option-group>
    </nly-form-select>

    <div class="mt-2">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null
      };
    }
  };
</script>

<!-- option.name -->
<!-- option.vue -->

如果混合使用 options prop 和 nly-form-select-option 组件， nly-form-select-option组件的内容会渲染在 options prop 的内容下面，如果要让 nly-form-select-option组件的内容会渲染在 options prop 的内容上面，请使用插槽 first

<template>
  <div>
    <nly-form-select v-model="selected" :options="options" class="mb-3">
      <!-- slot first 会渲染在 options prop 上方 -->
      <template slot="first">
        <nly-form-select-option :value="null" disabled
          >-- 请选择 --</nly-form-select-option
        >
      </template>

      <!-- 不使用插槽 first 会渲染在 options 下方 -->
      <nly-form-select-option value="C">选项C</nly-form-select-option>
      <nly-form-select-option value="D">选项D</nly-form-select-option>
    </nly-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: "A", text: "选项 A (options prop)" },
          { value: "B", text: "选项 B (options prop)" }
        ]
      };
    }
  };
</script>

<!-- first.name -->
<!-- first.vue -->

options prop

options prop 可以是数组，也可以是对象，支持一下属性设置：

  • value, 选择的值，选项被选中会把 value 传给 v-model 绑定的变量

  • disabled, 禁用属性，设置为 true 会禁用选项，无法选中

  • text, 选项显示的文本

  • html, 可以代替 text 显示的 html 字符串

value 属性可以是 string, number, 或者简单的对象. 请慎用复杂对象

如果 text 和 html 属性同时出现， html 属性会覆盖 text，即 html 属性的渲染的优先级比 text 高。 html 属性仅 支持原生的 html 字符串，如果嵌入组件，是不生效的。注意并非所有的浏览器都会支持所有的 html 字符串。

注意: 使用 (html) 字符串的属性可能会引起 脚本攻击 (XSS)， 当用户使用这类属性的时候，您应该谨慎 处理 这类值

数组类型 options

数组 opitons 可以申明为：

const options = [
  "A",
  "B",
  "C",
  { text: "D", value: { d: 1 }, disabled: true },
  "E",
  "F"
];

在数组 options 中可以混合使用对象和字符串

nly-form-select 组件会把上面的数组转换为以下形式:

const options = [
  { text: "A", value: "A", disabled: false },
  { text: "B", value: "B", disabled: false },
  { text: "C", value: "C", disabled: false },
  { text: "D", value: { d: 1 }, disabled: true },
  { text: "E", value: "E", disabled: false },
  { text: "F", value: "F", disabled: false }
];

数组中包含对象类型 options

对象 options 可以申明如下:

const options = [
  { text: "Item 1", value: "first" },
  { text: "Item 2", value: "second" },
  { html: "<b>Item</b> 3", value: "third", disabled: true },
  { text: "Item 4" },
  { text: "Item 5", value: { foo: "bar", baz: true } }
];

如果没有在数组的对象元素中定义 value 属性，text 属性既会渲染成 text, 又会渲染成 value 属性。

如果使用的是 html 属性, 那必须提供一个 value 属性， 否则会报错

对象类型 options

不推荐使用

对象类型 opitons 可以申明如下：

const options = {
  a: "Item A",
  b: "Item B",
  c: { html: "Item C", disabled: true },
  d: { text: "Item D", value: "zzz" },
  e: { text: "Item E", value: { foo: "bar", baz: true } }
};

nly-form-select 组件会把上面的对象转换为以下形式:

const options = [
  { text: "Item A", value: "a", disabled: false },
  { text: "Item B", value: "b", disabled: false },
  { html: "Item C", value: "c", disabled: false },
  { text: "Item D", value: "zzz", disabled: true },
  { text: "Item E", value: { foo: "bar", baz: true }, disabled: false }
];

注意，由于对象的无序性，无法保证最终渲染的 option 的顺序，所以不推荐使用对象类型 options

自定义属性

如果您想用自定义的属性来代替 text, value 属性。比如使用 name 来代替 text, 可以通过 text-field, html-field, value-field, 和 disabled-field prop 来指定自定义的属性

<template>
  <div>
    <nly-form-select
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></nly-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: "A",
        options: [
          { item: "A", name: "Option A" },
          { item: "B", name: "Option B" },
          { item: "D", name: "Option C", notEnabled: true },
          { item: { d: 1 }, name: "Option D" }
        ]
      };
    }
  };
</script>

<!-- 自定义属性.name -->
<!-- custom.vue -->

注意

如果您传入给 v-model 的值没有匹配 options 中的任何元素， 那么 nly-form-select 组件默认会渲染成未选中状态，这会引发在 IOS 系统上将会导致组件无法选择第一个选项的 bug，建议在使用nly-form-select 组件时，将第一个选项设置为一个有空值的禁用选项。

<nly-form-select v-model="selected" :options="options">
  <template #first>
    <nly-form-select-option value="" disabled
      >-- 请选择 --</nly-form-select-option
    >
  </template>
</nly-form-select>

如果想了解更多，请查看 Vue 文档

单选模式

单选模式返回值

在单选模式下， nly-form-select 只会返回单个选中值

<template>
  <div>
    <nly-form-select v-model="selected" :options="options"></nly-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: "请选择" },
          { value: "a", text: "选项 a" },
          { value: "b", text: "选项 b" },
          { value: "c", text: "选项 c" },
          { value: "d", text: "禁用选项", disabled: true }
        ]
      };
    }
  };
</script>

<!-- 单选.name -->
<!-- single.vue -->

选择列表框

使用 select-size prop 可以使 adminlt3 默认格式的下拉框选择式样变成下拉列表式样。

可以设置 select-size 为大于 1 的数值来控制下拉列表的可见行数

请注意并非所有浏览器都支持下拉列表式样

<template>
  <div>
    <nly-form-select
      v-model="selected"
      :options="options"
      :select-size="5"
    ></nly-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: "请选择" },
          { value: "a", text: "选项 a" },
          { value: "b", text: "选项 b" },
          { value: "c", text: "选项 c" },
          { value: "d", text: "禁用选项", disabled: true },
          { value: "e", text: "选项 e" },
          { value: "f", text: "选项 f" }
        ]
      };
    }
  };
</script>
<!-- list.name -->
<!-- list.vue -->

多选模式

在多选模式下，nly-form-select 会返回一个数组值， 数组中至少会有一个元素。所以必须给 v-model 传入数组类型的值

<template>
  <div>
    <nly-form-select
      v-model="selected"
      :options="options"
      multiple
      :select-size="4"
    ></nly-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ["b"], // 数组类型
        options: [
          { value: null, text: "请选择" },
          { value: "a", text: "选项 a" },
          { value: "b", text: "选项 b" },
          { value: "c", text: "选项 c" },
          { value: "d", text: "禁用选项", disabled: true },
          { value: "e", text: "选项 e" },
          { value: "f", text: "选项 f" },
          { value: "g", text: "选项 g" }
        ]
      };
    }
  };
</script>
<!-- 多选模式.name -->
<!-- multiple.vue -->

大小

可以 设置size prop 来控制 nly-form-select 组件大小。可选 sm, lg

如果需要控制宽度，可以给 nly-form-select 组件的父元素控制宽度，因为默认下 nly-form-select 组件会填充整个父元素的宽度

自动聚焦

设置 prop autofocus 时， 渲染时会自动聚集到 nly-form-select 组件中，或者使用 keep_alive 时切回到缓存的 nly-form-select 组件时会自动聚焦到 nly-form-select 组件

验证状态

adminlte3 默认提供表单验证状态，您可以设置 valid prop 为 valid, invalid, waring, novalid

详情请查看 input valid

<template>
  <div>
    <nly-form-select
      v-model="selected"
      :options="options"
      valid="invalid"
    ></nly-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: "请选择" },
          { value: "a", text: "选项 a" },
          { value: "b", text: "选项 b" },
          { value: "c", text: "选项 c" },
          { value: "d", text: "禁用选项", disabled: true }
        ]
      };
    }
  };
</script>

<!-- valid.name -->
<!-- valid.vue -->

组件参数

查看源码

<nly-form-select>

组件简写

<nly-form-select> 组件可以用以下简写

  • <nly-select>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props (Click to sort Ascending)类型默认值描述
id
String设置id
name
String设置 表单控件的 'name' attribute 属性
disabled
Booleanfalse设置true为禁用状态
required
Booleanfalse将`required`属性添加到表单控件
form
Stringnull指定归属表单，可以放置在表单外面。form 应设置为对应表单的id
autofocus
Booleanfalse设置true，会自动聚焦
size
String大小, 可选 sm, lg
col
Booleanfalse在没有其他props的情况下, 所有列等宽, 放在class='row'的元素下有效
xs
String or Number在XS及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
sm
String or Number在SM及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
md
String or Number在MD及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
lg
String or Number在LG及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
xl
String or Number在XL及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
offset-xs
String or Number在XS及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-sm
String or Number在SM及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-md
String or Number在MD及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-lg
String or Number在LG及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-xl
String or Number在XL及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
order-xs
String or Number在XS及以上断点的排序, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-sm
String or Number在SM及以上断点的排序, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-md
String or Number在MD及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-lg
String or Number在LG及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-xl
String or Number在XL及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
valid
String表单验证提示状态,可选valid, invalid, warning, loading, novalid
plain
Booleanfalse渲染成plain模式
options
Array or Object[]设置，类型为一个数组或者对象
value-field
String'value'options 中的属性， 用于自定义 value
text-field
String'text'options 中的属性， 用于自定义 text
html-field
String'html'options 中的属性， 用于自定义 html
disabled-field
String'disabled'options 中的属性， 用于自定义 disabled
label-field
String'label'options 中的属性， 用于自定义 label
options-field
String'options'options 中的属性， 用于自定义 options
value
v-model 		Any选项的值, `v-model` 会把值传给value
multiple
Booleanfalse多选模式
select-size
Number0设置大于 1时， 可见下拉列表行数
aria-invalid
Boolean or Stringfalsearia-invalid 属性

v-model

PropertyEvent
valueinput

Slots

Slot NameDescription
first 使 nly-form-select-option 渲染在 'options' prop 上面的插槽

Events

EventArgumentsDescription
input
  1. value - 当前组件选中的值
组件选择值发生改变的时候触发的事件
change
  1. value - 当前组件选择的值
用户通过点击选项使得选择值发生变化时触发的事件
查看源码

<nly-form-select-option>

v0.6.6+ 函数式组件（Functional component）

组件简写

<nly-form-select-option> 组件可以用以下简写

  • <nly-select-option>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props类型默认值描述
value
必传 		Anyoption 的值
disabled
Booleanfalse禁用，设置true为禁用状态
查看源码

<nly-form-select-option-group>

v0.6.6+

组件简写

<nly-form-select-option-group> 组件可以用以下简写

  • <nly-select-option-group>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props类型默认值描述
options
Array or Object[]设置，类型为一个数组或者对象
value-field
String'value'options 中的属性， 用于自定义 value
text-field
String'text'options 中的属性， 用于自定义 text
html-field
String'html'options 中的属性， 用于自定义 html
disabled-field
String'disabled'options 中的属性， 用于自定义 disabled
label
必传 		Stringlabel 文本

Slots

Slot NameDescription
first 使 nly-form-select-option 渲染在 'options' prop 上面的插槽

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-form-select>NlyFormSelectnly-adminlte-vue
<nly-form-select-option>NlyFormSelectOptionnly-adminlte-vue
<nly-form-select-option-group>NlyFormSelectOptionGroupnly-adminlte-vue

例子

import { NlyFormSelect } from 'nly-adminlte-vue'
Vue.component('nly-form-select', NlyFormSelect)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
FormSelectPluginnly-adminlte-vue

例子

import { FormSelectPlugin } from 'nly-adminlte-vue'
Vue.use(FormSelectPlugin)