framework / eagle-web-toolkit

select.md 10.8 KB

Select 选择器

拓展ElementUI的el-select，支持快捷配置数据源。

6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/select.md#">基础用法

适用广泛的基础单选

::: snippet 设置options配置选择器数据源

<template>
  <eagle-select v-model="model" :options="options"></eagle-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN' },
        { label: '牵引车', value: 'TRACTOR' }
      ],
    }
  } 
}
</script>

:::

::: snippet 配置option插槽可自定义选项样式

<template>
  <eagle-select v-model="model" :options="options">
    <template #option="{ item, value }">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>{{ item.label }}</span>
        <el-tag size="mini">{{ item.type }}</el-tag>
      </div>
    </template>
  </eagle-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN', type: '国产' },
        { label: '牵引车', value: 'TRACTOR', type: '进口' }
      ],
    }
  },
}
</script>

:::

::: snippet 设置filterable启用搜索功能

<template>
  <eagle-select v-model="model" :options="options" filterable></eagle-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN' },
        { label: '牵引车', value: 'TRACTOR' }
      ],
    }
  },
}
</script>

:::

::: snippet 设置clearable可清空选项

<template>
  <eagle-select v-model="model" :options="options" clearable></eagle-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '单车', value: 'VAN' },
        { label: '牵引车', value: 'TRACTOR' }
      ],
    }
  },
}
</script>

:::

::: snippet 支持直接配置<el-option>子项

<template>
  <eagle-select v-model="model">
    <el-option label="单车" value="VAN">单车</el-option>
    <el-option label="牵引车" value="TRACTOR">牵引车</el-option>
  </eagle-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
    }
  } 
}
</script>

:::

6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/select.md#">绑定值参数名

可以根据不同业务数据的需要，自定义下拉框的绑定值参数名。

::: snippet labelKey设置下拉框显示的文本，默认label；valueKey设置下拉框选项对应的值，默认value。

<template>
  <div>
    <eagle-select v-model="model" :options="options" label-key="name" value-key="code"></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { name: '单车', code: 'VAN' },
        { name: '牵引车', code: 'TRACTOR' }
      ],
    }
  } 
}
</script>

:::

6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/select.md#">设置多选

多选时支持字符串或数组类型的值

::: snippet 设置multiple开启多选，选中值为数组类型

<template>
  <div>
    <eagle-select v-model="model" :options="options" multiple></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: ['zs', 'ls'],
      options: [
        { label: '张三', value: 'zs' },
        { label: '李四', value: 'ls' },
        { label: '王五', value: 'ww' }
      ],
    }
  },
}
</script>

:::

::: snippet 设置stringify后，选中值为字符串类型

<template>
  <div>
    <eagle-select v-model="model" :options="options" multiple stringify></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: 'zs,ls',
      options: [
        { label: '张三', value: 'zs' },
        { label: '李四', value: 'ls' },
        { label: '王五', value: 'ww' }
      ],
    }
  },
}
</script>

:::

::: snippet 设置sequence固定序列，选中顺序与数据源顺序保持一致

<template>
  <div>
    <eagle-select v-model="model" :options="options" multiple sequence style="min-width: 300px;"></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: [],
      options: [
        { label: '张三', value: 'zs' },
        { label: '李四', value: 'ls' },
        { label: '王五', value: 'ww' }
      ],
    }
  },
}
</script>

:::

6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/select.md#">远程加载

可以通过设置queryApi自定义查询接口，必须是返回Promise的Function类型，Promise的返回值为Array类型，格式需要与lebalKey、valueKey项对应。

::: snippet queryApi自定义查询接口

<template>
  <div>
    <eagle-select v-model="model" :options="options" :queryApi="queryAPI"></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '王七', value: 'wq' },
        { label: '陈拾', value: 'cs' },
      ]
    }
  },
  methods: {
    queryAPI(val) {
      // 正式项目使用时，可以返回axios的实例，如：
      // return this.$axios({ url: 'xxx', params: { foo: 'bar' } }).then(response => ({ result: response.result }));
      // 此处的Promise是模拟接口
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>

:::

::: snippet lazy设置懒加载，即初始化后不自动执行查询，而是第一次点击下拉时加载

<template>
  <div>
    <eagle-select v-model="model" :queryApi="queryAPI" lazy></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
    }
  },
  methods: {
    queryAPI(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>

:::

::: snippet update设置每次打开下拉框都保持最新数据

<template>
  <div>
    <eagle-select v-model="model" :queryApi="queryAPI" :options="options" update></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '王七', value: 'wq' },
        { label: '陈拾', value: 'cs' },
      ]
    }
  },
  methods: {
    queryAPI(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>

:::

6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/select.md#">搜索前校验

可以通过设置before-query设置搜索之前的钩子，若为返回值为false则不执行搜索。

::: snippet 一般用于搜索前的业务逻辑校验

<template>
  <eagle-select v-model="model" :options="options" :queryApi="queryAPI" :before-query="beforeQuery"></eagle-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '王七', value: 'wq' },
        { label: '陈拾', value: 'cs' },
      ]
    }
  },
  methods: {
    beforeQuery(query) {
      // 输入两个字符以上才执行查询
      return query.length > 2;
    },
    queryAPI(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>

:::

6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/select.md#">可创建新条目

设置allow-create和filterable允许创建新的选项，输入内容后可以直接选择已输入的内容

::: snippet 单选示例

<template>
  <div>
    <eagle-select v-model="model" allow-create filterable>
      <el-option label="单车" value="VAN">单车</el-option>
      <el-option label="牵引车" value="TRACTOR">牵引车</el-option>
    </eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
    }
  } 
}
</script>

:::

::: snippet 多选示例

<template>
  <div>
    <eagle-select v-model="model" multiple allow-create filterable>
      <el-option label="单车" value="VAN">单车</el-option>
      <el-option label="牵引车" value="TRACTOR">牵引车</el-option>
    </eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
    }
  } 
}
</script>

:::

::: snippet 远程示例，输入创建的新项为临时项，选中后再次下拉时不会包括在选项结果中

<template>
  <div>
    <eagle-select v-model="model" :options="options" :queryApi="queryAPI" allow-create filterable></eagle-select>
    <span>{{ model }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      options: [
        { label: '王七', value: 'wq' },
        { label: '陈拾', value: 'cs' },
      ]
    }
  },
  methods: {
    queryAPI(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            result: [
              { label: '王五', value: 'ww' },
              { label: '赵六', value: 'zl' },
            ]
          });
        }, 1000);
      });
    },
  }
}
</script>

:::

API

Attribute 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- value | 值 | String, Number, Boolean, Object, Array | - | - placeholder | 占位符 | String | - | 请选择 options | 选项列表 | Array | - | [] labelKey | 标签字段名 | String | - | label valueKey | 值字段名 | String | - | value searchKey | 搜索字段名 | String | - | query size | 大小 | String | mini、small、large | mini multiple | 多选 | Boolean | - | false disabled | 禁用 | Boolean | - | false clearable | 可清除 | Boolean | - | true filterable | 可搜索 | Boolean | - | true queryApi | 自定义接口 | Function | - | - lazy | 初始化后懒加载数据 | Boolean | - | true update | 点开下拉框时更新数据 | Boolean | - | false

Events 事件

事件名称|说明|回调参数 -|-|- change | 改变选中 | 值，选中项数据