cv-select-base 单列选择器

简要

单列选择
支持单选和多选，一般和表单配合使用，默认为实心白色背景。

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>select 组件-基础</h1>
      <h3>json模式</h3>
      <cv-select-base
        v-model="formData.selectBaseVal1"
        :dataDisabled="settDataDisabled"
        :dataLists="selectList"
        @onChoose="onChoose"
      />
      <h3>插槽模式</h3>
      <cv-select-base v-model="formData.selectBaseVal2" @onChoose="onChoose">
        <cv-select-opt label="参数1" :value="3">参数1</cv-select-opt>
        <cv-select-opt label="参数2" :value="6">参数2</cv-select-opt>
        <cv-select-opt label="参数3" :value="7">参数3</cv-select-opt>
      </cv-select-base>
      <h3>多选模式</h3>
      <cv-select-base v-model="formData.selectBaseVal3" multiple :multiple-limit="2" :dataLists="selectList" />
      <p>设置选项 dataLists</p>
      <cv-select-base v-model="formData.selectBaseVal1" :dataLists="selectList" />
      <p>多选和选取数量限制</p>
      <cv-select-base v-model="formData.selectBaseVal3" :dataLists="selectList" multiple :multiple-limit="2" />
    </div>
    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        selectBaseVal1: '',
        selectBaseVal2: '',
        selectBaseVal3: []
      },
      settDataDisabled: [{ label: '黄金糕', value: '选项1' }],
      selectList: [
        { value: 0, label: '111' },
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭', disabled: true }
      ],
      selectList1: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭', disabled: true }
      ]
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('最后的formData', this.formData);
    },

    // 当前选中值的整个对象，和该对象在数组中的索引
    onChoose(obj, index) {
      console.log(obj, index);
    },
    // 请求方法
    apiFunc() {
      // apiFunc :this.$request.urlGet("https://")

      // this.$request.flagGet("SCM_SETT_CATEGORY", {
      //   cat_id: 0
      // });
      setTimeout(() => {
        this.options = this.list.filter((item) => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      }, 200);
    }
  }
};
</script>

:::

属性

属性名	类型	默认	说明	可选值
dataLists	Array	-	设置选项，详见下面说明	-
dataField	Object	-	自定数据字段，详见下面说明	-
dataDisabled	Array	-	禁用对应的选项（根据value）	-
multiple	Boolean	-	是否多选	-
multiple-limit	Number	-	多选时用户最多可以选择的项目数	-
placeholder	String	-	输入框占位文本	-
v-model	String	-	数据双向绑定	-
disabled	Boolen	false	是否禁止	-
clearable	boolean	true	清空按钮	-
size	String	-	尺寸	medium / small / mini

• [ dataLists ] 说明
  默认格式为 {label:"选项1",value:"1"} ，label 作为选项名，value 作为选中的返回值

• [ dataField ] 说明
  如果你的数据是这种格式 {text:"选项1",val:"1"} ，只需要用该属性传入 {label:"text",value:"val"} 组件会将 text 作为 label ，val 作为 value 进行渲染

• [ rules ] 内置规则

规则	说明
require	是否必填（字段名前显示星号）

事件

事件名	参数	说明
onChoose	obj,index	返回当前选中对象，及该对象在数组中的索引