<script setup>
import ViewSelect from './select.vue'
 const filedHeaders=[
  {key:"field",title:"属性"},
  {key:"desc",title:"说明"},
  {key:"type",title:"类型"},
  // {key:"required",title:"是否必填"},
  {key:"defaultValue",title:"默认值"},
]
	
const filedData0 = [
  {
		field: 'value',
		type: 'any',
		required: '是',
    defaultValue: "''",
		desc: "当前选择的元素，需使用v-model双向绑定",
	},
	{
		field: 'data',
		type: 'Array',
		required: '是',
    defaultValue: "无",
		desc: "下拉数据数组，eg：[{label:'',value:''}]",
	},
	{
		field: 'label',
		type: 'String',
		required: '否',
    defaultValue: "无",
		desc: "下拉框的标题",
	},
  {
		field: 'width',
		type: 'String',
		required: '否',
    defaultValue: "240px",
		desc: "select的宽度，默认240px",
	},
	{
		field: 'placeholder',
		type: 'String',
		required: '否',
    defaultValue: "请选择",
		desc: "下拉框的placeholder, 定义了placeholder就使用placeholder，不定义则使用label",
	},
	{
		field: 'nodefalut',
		type: 'Boolean',
		required: '否',
    defaultValue: "false",
		desc: "默认选中第一个，若不需要默认值，设置nodefalut=true",
	},
]
</script>

# 下拉
对select组件进行封装，支持自定义placeholder、label、是否需要默认值等功能，其他能力继承select。

## 功能介绍
<ClientOnly>
 <Table :data="filedData0" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>
</ClientOnly>

## 代码示例
<ClientOnly>
  <ViewSelect/>
</ClientOnly>

## 完整代码如下：

<div class="options-api" style="font-size:14px;">

```vue
<template>
  <div>
    <h4>基本使用</h4>
    <KsSelect
        v-model="selectValue1"
        :data="data"
        label="云环境1"
        width="200px"
        clearable
    />
    选择的值：{{selectValue1}}
    <h4>自定义placeholder</h4>
    <KsSelect
        v-model="selectValue2"
        :data="data"
        label="云环境2"
        :nodefalut="true"
        placeholder="请选择所需要的数据"
    />
    选择的值：{{selectValue2}}

    <h4>不需要默认值</h4>
    <KsSelect
        v-model="selectValue3"
        :data="data"
        label="云环境3"
        :nodefalut="true"
    />
    选择的值：{{selectValue3}}

    <h4>不带label</h4>
    <KsSelect
        v-model="selectValue4"
        :data="data"
        :nodefalut="true"
    />
    选择的值：{{selectValue4}}
  </div>
</template>
<script setup>
import { ref } from "vue";
// import { KsSelect } from '@ksconsole/components'

const selectValue1 = ref('')
const selectValue2 = ref('')
const selectValue3 = ref('')
const selectValue4 = ref('')
const data = [
  { label: '数据1', value: '1' },
  { label: '数据2', value: '2' },
]
</script>
<style scoped lang='less'>
h4 {
  margin: 20px 0;
}
</style>


```
</div>
