# 下拉框组件

# 介绍

下拉框组件


# 基础使用 (传入数组或者对象)

<template>
  <div class="t-input">
    <div class="content-main t-margin20">
      <Ot-Select
        size="mini"
        v-model="variableName"
        placeholder="请选择"
        :data="{
          type: 'value',
          data: {
            userid: '用户id',
            sysdate: '系统时间',
            deptid: '部门id',
            orgid: '租户id',
            suborgid: '子组织id',
          },
        }"
      ></Ot-Select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      variableName: ''
    };
  },
  methods: {
  },
};
</script>
显示代码

# 默认选择第一个

<template>
  <div class="t-input">
    <div class="content-main t-margin20">
      <Ot-Select
        size="mini"
        v-model="variableName"
        defaultCheckFirst
        placeholder="请选择"
        :data="{
          type: 'value',
          data: {
            userid: '用户id',
            sysdate: '系统时间',
            deptid: '部门id',
            orgid: '租户id',
            suborgid: '子组织id',
          },
        }"
      ></Ot-Select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      variableName: ''
    };
  },
  methods: {
  },
};
</script>
显示代码

# 文档和示例

示例:

     <OTSelect
          v-model="appId"
          :clearable="false"
          style="width: 100%"
          size="small"
          :default-check-first="true"
          :data="{ type: 'value', data: appList }"
          @change="getUserRoleList"
    ></OTSelect>
     appList: [], // 传入一个数组

# 功能

  • 基于element ui的el-select组件进行封装

# 在组件中使用

    <OTSelect
      v-model="formData.adminRange"
      style="width: 90%"
      defaultCheckFirst
      clearable 
      @change="changeValue"
      :data="{
           type: 'value',
           data: {
                '1': '按单位过滤包括下级',
                '2': '按单位过滤不包括下级',
           },
      }"
    ></OTSelect>

# 参数说明

  • v-model: 双向绑定的值
  • defaultCheckFirst:是否默认选中第一个
  • data:
    {type:'value',data:{1:'男',2:'女'}},固定组,即固定的组值