ci-plus/src/select/README.md

ci组件库

CiSelect 下拉选择组件
单选

```ts
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueCustom="label"
        @change="selectChange"
        width="200px"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts" name="Single">
import { ref } from 'vue'
const selectVlaue = ref<any>()
const stepList = [
  { label: '开始' },
  { label: 'POSUI' },
  { label: '11' },
  { label: 'GX123' },
  { label: '烘干破碎' },
  { label: '车间仓库' },
  { label: 'ui3333' },
  { label: 'hhh333' }
]
const selectChange = (val: any) => {
  console.log('selectChange', val, selectVlaue.value)
}
</script>
```

自定义显示下拉项label
设置customLabel字符串表达式：${item.label}（${item.id}）;注意：表达式必须以item开头，且后面的属性必须存在optionSource中

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="自定义显示下拉项label"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueCustom="label"
        customLabel="`${item.label}（${item.id}）`"
        @change="selectChange"
      ></ci-select>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const selectVlaue = ref<any>()
const stepList = ref([
  { label: '开始', id: 1 },
  { label: 'POSUI', id: 2 },
  { label: '11', id: 3 },
  { label: 'GX123', id: 4 },
  { label: '烘干破碎', id: 5 },
  { label: '车间仓库', id: 6 },
  { label: 'ui3333', id: 7 },
  { label: 'hhh333', id: 8 }
])
const selectChange = (val: any) => {
  console.log('selectChange', val, selectVlaue.value)
}
</script>
```

单选分页
在组件中配置：isShowPagination 及 paginationOption

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="请选择工序（单选分页）"
        v-model="selectVlaue"
        :optionSource="stepList"
        labelCustom="materialName"
        valueCustom="id"
        @current-change="currentChange"
        @change="selectChange"
        isShowPagination
        :paginationOption="paginationOption"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="Pagination">
import { onMounted, ref } from 'vue'
import data from './data.json'
import data1 from './data1.json'
const selectVlaue = ref<any>()
const stepList = ref([])
const paginationOption = ref({
  pageSize: 6, // 每页显示条数
  currentPage: 1, // 当前页
  pagerCount: 7, // 按钮数，超过时会折叠
  total: 0 // 总条数
})
onMounted(() => {
  getList(1)
})
const getList = async (pageNum) => {
  let res
  if (pageNum === 1) {
    res = await data
  } else {
    res = await data1
  }
  if (res.success) {
    stepList.value = res.data.records
    paginationOption.value.total = res.data.total
    // console.log('获取数据', paginationOption.value)
  }
}
// 切换分页
const currentChange = (val: any) => {
  console.log('切换分页current-change事件', val)
  getList(val)
}
const selectChange = (val: any) => {
  console.log(`change返回值${val};v-model值${selectVlaue.value}`)
}
</script>
```

单选禁用
在组件中数据源：optionSource 不满足条件时，新增disabled属性，设置为true即可

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="单选禁用"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueCustom="label"
        @change="selectChange"
        width="200px"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="singleDisabled">
import { onMounted, ref } from 'vue'
const selectVlaue = ref<any>()
const stepList: any = ref([])
onMounted(() => {
  getData()
})
const getData = () => {
  let list = [
    { label: '开始', id: 1 },
    { label: 'POSUI', id: 2 },
    { label: '11', id: 3 },
    { label: 'GX123', id: 4 },
    { label: '烘干破碎', id: 5 },
    { label: '单选禁用项', id: undefined },
    { label: '车间仓库', id: 6 },
    { label: 'ui3333', id: 7 },
    { label: 'hhh333', id: 8 }
  ]
  list.map((item: any) => {
    if (item.id === undefined) {
      item.disabled = true
    }
  })
  stepList.value = list
}
// 选中值发生变化时触发
const selectChange = (val: any) => {
  console.log('selectChange', val, selectVlaue.value)
}
</script>
```

多选禁用
在组件中数据源：optionSource 不满足条件时，新增disabled属性，设置为true即可

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="多选禁用"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueCustom="label"
        @change="selectChange"
        multiple
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="Multiple">
import { ref, onMounted } from 'vue'
const selectVlaue = ref<any>()
const stepList: any = ref([])
onMounted(() => {
  getData()
})
const getData = () => {
  let list = [
    { label: '开始', id: 1 },
    { label: 'POSUI', id: 2 },
    { label: '11', id: 3 },
    { label: 'GX123', id: 4 },
    { label: '烘干破碎', id: 5 },
    { label: '单选禁用项1', id: undefined },
    { label: '单选禁用项2', id: undefined },
    { label: '车间仓库', id: 6 },
    { label: 'ui3333', id: 7 },
    { label: 'hhh333', id: 8 }
  ]
  list.map((item: any) => {
    if (item.id === undefined) {
      item.disabled = true
    }
  })
  stepList.value = list
}
const selectChange = (val: any) => {
  console.log('selectChange', val, selectVlaue.value)
}
</script>
```

多选

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueCustom="label"
        @change="selectChange"
        multiple
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="Multiple">
import { ref } from 'vue'
const selectVlaue = ref<any>()
const stepList = [
  { label: '开始' },
  { label: 'POSUI' },
  { label: '11' },
  { label: 'GX123' },
  { label: '烘干破碎' },
  { label: '车间仓库' },
  { label: 'ui3333' },
  { label: 'hhh333' }
]
const selectChange = (val: any) => {
  console.log('selectChange', val, selectVlaue.value)
}
</script>
```

多选--隐藏多余标签的多选
use collapse-tags
use collapse-tags-tooltip
use max-collapse-tags

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <div>use collapse-tags</div>
      <ci-select
        placeholder="请选择(多选)"
        v-model="selectVlaue1"
        :optionSource="stepList"
        valueCustom="label"
        collapse-tags
        multiple
        @change="selectChange($event, '1')"
      />
    </t-layout-page-item>
    <t-layout-page-item>
      <div>use collapse-tags-tooltip</div>
      <ci-select
        placeholder="请选择(多选)"
        v-model="selectVlaue2"
        :optionSource="stepList"
        valueCustom="label"
        collapse-tags
        collapse-tags-tooltip
        multiple
        @change="selectChange($event, '2')"
      />
    </t-layout-page-item>
    <t-layout-page-item>
      <div>use max-collapse-tags</div>
      <ci-select
        placeholder="请选择(多选)"
        v-model="selectVlaue3"
        :optionSource="stepList"
        valueCustom="label"
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
        multiple
        @change="selectChange($event, '3')"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="multipleCollapseTags">
import { ref } from 'vue'
const selectVlaue1 = ref<any>()
const selectVlaue2 = ref<any>()
const selectVlaue3 = ref<any>()
const stepList = [
  { label: '开始' },
  { label: 'POSUI' },
  { label: '11' },
  { label: 'GX123' },
  { label: '烘干破碎' },
  { label: '车间仓库' },
  { label: 'ui3333' },
  { label: 'hhh333' }
]
const selectChange = (val: any, type) => {
  console.log(`selectChange--selectVlaue${type}`, val)
}
</script>
```

多选分页
在组件中配置：isShowPagination 及 paginationOption；多选不支持翻页选中功能

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="请选择工序（多选分页）"
        v-model="selectVlaue"
        :optionSource="stepList"
        labelCustom="materialName"
        valueCustom="id"
        @current-change="currentChange"
        @change="selectChange"
        isShowPagination
        multiple
        :paginationOption="paginationOption"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="Pagination">
import { onMounted, ref } from 'vue'
import data from './data.json'
import data1 from './data1.json'
const selectVlaue = ref<any>()
const stepList = ref([])
const paginationOption = ref({
  pageSize: 6, // 每页显示条数
  currentPage: 1, // 当前页
  pagerCount: 7, // 按钮数，超过时会折叠
  total: 0 // 总条数
})
onMounted(() => {
  getList(1)
})
const getList = async (pageNum) => {
  let res
  if (pageNum === 1) {
    res = await data
  } else {
    res = await data1
  }
  if (res.success) {
    stepList.value = res.data.records
    paginationOption.value.total = res.data.total
    // console.log('获取数据', paginationOption.value)
  }
}
// 切换分页
const currentChange = (val: any) => {
  console.log('切换分页current-change事件', val)
  getList(val)
}
const selectChange = (val: any) => {
  console.log(`change返回值${val};v-model值${selectVlaue.value}`)
}
</script>
```

虚拟列表--单选
在组件中配置：use-virtual 即可

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="请选择(虚拟列表--单选)"
        v-model="selectVlaue"
        :optionSource="stepList"
        useVirtual
        @change="selectChange"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="useVirtual">
import { ref } from 'vue'
const selectVlaue = ref<any>()
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const stepList = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`
}))
const selectChange = (val: any) => {
  console.log('selectChange', val, selectVlaue.value)
}
</script>
```

虚拟列表--多选
在组件中配置：use-virtual 即可

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <ci-select
        placeholder="请选择(虚拟列表--多选)"
        v-model="selectVlaue"
        :optionSource="stepList"
        useVirtual
        multiple
        @change="selectChange"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="useVirtual">
import { ref } from 'vue'
const selectVlaue = ref<any>()
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const stepList = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`
}))
const selectChange = (val: any) => {
  console.log('selectChange', val, selectVlaue.value)
}
</script>
```

虚拟列表--隐藏多余标签的多选
use collapse-tags
use collapse-tags-tooltip
use max-collapse-tags

```vue
<template>
  <t-layout-page>
    <t-layout-page-item>
      <div>use collapse-tags</div>
      <ci-select
        placeholder="请选择(虚拟列表--多选选)"
        v-model="selectVlaue1"
        :optionSource="stepList"
        useVirtual
        collapse-tags
        multiple
        @change="selectChange($event, '1')"
      />
    </t-layout-page-item>
    <t-layout-page-item>
      <div>use collapse-tags-tooltip</div>
      <ci-select
        placeholder="请选择(虚拟列表--多选选)"
        v-model="selectVlaue2"
        :optionSource="stepList"
        useVirtual
        collapse-tags
        collapse-tags-tooltip
        multiple
        @change="selectChange($event, '2')"
      />
    </t-layout-page-item>
    <t-layout-page-item>
      <div>use max-collapse-tags</div>
      <ci-select
        placeholder="请选择(虚拟列表--多选选)"
        v-model="selectVlaue3"
        :optionSource="stepList"
        useVirtual
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
        multiple
        @change="selectChange($event, '3')"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts" name="useVirtual">
import { ref } from 'vue'
const selectVlaue1 = ref<any>()
const selectVlaue2 = ref<any>()
const selectVlaue3 = ref<any>()
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const stepList = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`
}))
const selectChange = (val: any, type) => {
  console.log(`selectChange--selectVlaue${type}`, val)
}
</script>
```

CiSelect Attributes
1、代码示例
下拉选择组件————可实现单选多选（多选可使用全选功能）

```html
<ci-select
  placeholder="请选择工序"
  v-model="selectVlaue"
  :optionSource="state.stepList"
  valueCustom="label"
  @change="selectChange"
/>
```

2、配置参数（Attributes）继承 el-select&el-select-v2 Attributes

参数 说明 类型 默认值
v-model 绑定值 boolean / string / number/Array 无
multiple 是否多选 Boolean false
optionSource 下拉数据源 Array 无
customLabel 是否自定义设置下拉label String -
valueCustom 传入的 option 数组中，要作为最终选择项的键值 key String 'key'
labelCustom 传入的 option 数组中，要作为显示项的键值名称 String 'label'
useVirtual 是否开启虚拟列表(继承el-select-v2属性) Boolean false
isShowPagination 是否开启分页 Boolean false
paginationOption 分页配置 Object -

2-1、paginationOption配置参数（Attributes）继承 el-pagination Attributes

参数 说明 类型 默认值
currentPage 当前页数 number 1
pageSize 每页显示条目个数 number 6
pagerCount 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 number 5
total 总条目数 number 0
layout 组件布局，子组件名用逗号分隔 string 'total, prev, pager, next, jumper'
bind el-pagination属性 Object -

3、继承 el-select&el-pagination&el-select-v2 events