Select 下拉选择

特性

1. 使用 v-model 绑定选中标签的值
2. 传入 option 即可渲染组件
3. 可以配置接口远程获取下拉选项，可通过 load 控制远程获取选项的时机
4. 可以通过配置懒加载，分页获取下拉选项，并支持模糊查询
5. 基于 vue2 版本封装，强依赖于 element-ui
6. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。

基本用法

通过 option 设置数据项

当前选中的值是：

<template>
  <div>
    <niuka-select v-model="value" :options="options"></niuka-select>
    当前选中的值是：{{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '隐藏', value: 'hidden', hidden: true },
        { label: '禁用', value: 'disabled', disabled: true },
      ],
    };
  },
};
</script>

隐藏源代码

远端获取下拉选项

通过配置 dataType 为 custom 并通过 netWork 配置接口及参数，即可从远端获取下拉选项

当前选中的值是：

<template>
  <div>
    <niuka-select
      v-model="value"
      data-type="custom"
      :net-work="netWork"
      filterable
    ></niuka-select>
    当前选中的值是：{{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      netWork: {
        method: (params) => this.http.$get('/niuka/mock/select.json', params),
        params: {},
      },
    };
  },
};
</script>

隐藏源代码

数据分页

配置 `` 属性，即可在获取数据时增加分页参数，下拉选项滑动到底部时触发加载更多

当前选中的值是：

<template>
  <div>
    <niuka-select
      v-model="value"
      data-type="custom"
      :net-work="netWork"
      filterable
      lazy
    ></niuka-select>
    当前选中的值是：{{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      netWork: {
        method: (params) => this.createdOptions(params),
        params: {},
      },
    };
  },
  methods: {
    createdOptions(params) {
      console.log(params, 'params');
      const data = [];
      for (let index = 0; index < params.size; index++) {
        const i = (params.page - 1) * params.size + index + 1;
        data.push({
          label: `选项${i}`,
          value: i,
        });
      }
      return {
        data: data.filter((i) => i.label.includes(params.name)),
      };
    },
  },
};
</script>

隐藏源代码

NiukaSelect Attributes

NiukaSelect Events

NiukaSelect Methods

OptionAttrs Attributes

NetWork Attributes

Option Attributes