antdv-hook-enhance
On this page

useAutoSelect ​

示例 ​

简单用法 ​

请选择
简单用法
模拟业务中使用字典
<script setup lang="ts">
import { useAutoSelect } from '@hooks/components'

function getSelectOptionAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          value: 1,
          label: '张三'
        },
        {
          value: 2,
          label: '李四'
        },
        {
          value: 3,
          label: '王五'
        }
      ])
    }, 1000)
  })
}

const result = useAutoSelect({
  apiFun: getSelectOptionAPI
})
</script>

<template>
  <div class="col">
    <a-select v-bind="result.bindProps"></a-select>
  </div>
</template>
<script setup lang="ts">
import { useAutoSelect } from '@hooks/components'

function getSelectOptionAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          value: 1,
          label: '张三'
        },
        {
          value: 2,
          label: '李四'
        },
        {
          value: 3,
          label: '王五'
        }
      ])
    }, 1000)
  })
}

const result = useAutoSelect({
  apiFun: getSelectOptionAPI
})
</script>

<template>
  <div class="col">
    <a-select v-bind="result.bindProps"></a-select>
  </div>
</template>

手动执行 ​

请选择
手动执行
特殊情况下的手动取参
<script setup lang="ts">
import { useAutoSelect } from '@hooks/components'
import { onMounted } from 'vue'

function getSelectOptionAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          value: 1,
          label: '张三'
        },
        {
          value: 2,
          label: '李四'
        },
        {
          value: 3,
          label: '王五'
        }
      ])
    }, 1000)
  })
}

const result = useAutoSelect({
  apiFun: getSelectOptionAPI,
  queryInMount: false
})

onMounted(() => {
  result.loadData()
})
</script>

<template>
  <div class="col">
    <a-select v-bind="result.bindProps"></a-select>
  </div>
</template>
<script setup lang="ts">
import { useAutoSelect } from '@hooks/components'
import { onMounted } from 'vue'

function getSelectOptionAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          value: 1,
          label: '张三'
        },
        {
          value: 2,
          label: '李四'
        },
        {
          value: 3,
          label: '王五'
        }
      ])
    }, 1000)
  })
}

const result = useAutoSelect({
  apiFun: getSelectOptionAPI,
  queryInMount: false
})

onMounted(() => {
  result.loadData()
})
</script>

<template>
  <div class="col">
    <a-select v-bind="result.bindProps"></a-select>
  </div>
</template>

转换结果 ​

选择吧
转换结果
接口结果匹配组件参数
<script setup lang="ts">
import { useAutoSelect } from '@hooks/components'

function getSelectOptionAPI() {
  return new Promise<any[]>((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          name: '张三'
        },
        {
          id: 2,
          name: '李四'
        },
        {
          id: 3,
          name: '王五'
        }
      ])
    }, 1000)
  })
}

const result = useAutoSelect({
  apiFun: getSelectOptionAPI,
  placeholder: '选择吧',
  transformDataFun(data) {
    return data.map((e) => {
      return {
        value: e.id,
        label: e.name
      }
    })
  }
})
</script>

<template>
  <div class="col">
    <a-select v-bind="result.bindProps"></a-select>
  </div>
</template>
<script setup lang="ts">
import { useAutoSelect } from '@hooks/components'

function getSelectOptionAPI() {
  return new Promise<any[]>((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          name: '张三'
        },
        {
          id: 2,
          name: '李四'
        },
        {
          id: 3,
          name: '王五'
        }
      ])
    }, 1000)
  })
}

const result = useAutoSelect({
  apiFun: getSelectOptionAPI,
  placeholder: '选择吧',
  transformDataFun(data) {
    return data.map((e) => {
      return {
        value: e.id,
        label: e.name
      }
    })
  }
})
</script>

<template>
  <div class="col">
    <a-select v-bind="result.bindProps"></a-select>
  </div>
</template>

参数 ​

参数描述必选类型默认值
apiFun调用远程接口返回数据true()=>[]-
queryInMount在onMounted时调用接口初始化数据falsebooleantrue
initQueryParams调用远程接口时传入的默认参数falseany[]-
transformDataFun远程接口返回数据转化为optionfalse(data:any[])=>[]-
placeholder组件的placeholderfalsestring-

实例属性与方法 ​

参数描述类型
bindProps绑定给组件的属性值{}
loadData手动调用远程接口()=>promise
setOptions手动设置select的option属性(options:[])=>void