Select选择框

基础用法

效果预览可直接操作下方示例

通过将type属性的值指定为select,同时配置dicData为字典值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '下拉框',
    prop: 'select',
    type: 'select',
    dicData: [{
      label: '字典1',
      value: 0
    }, {
      label: '字典2',
      value: 1
    }]
  }]
});
</script>

虚拟

在某些使用情况下，单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担，从而造成性能问题。 为了更好的用户和开发者体验

效果预览可直接操作下方示例

配置virtualize为true即可开启虚拟Dom模式

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '下拉框',
      prop: 'select',
      type: 'select',
      virtualize: true,
      dicData: Array.from({ length: 10000 }, (_, index) => ({
        label: '选项' + (index + 1),
        value: index + 1
      }))
    }
  ]
});
</script>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '下拉框',
      prop: 'select',
      type: 'select',
      dicData: [
        { label: '字典1', value: 0 },
        { label: '字典2', value: 1 }
      ],
      value: 0
    }
  ]
});
</script>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '下拉框',
      prop: 'select',
      type: 'select',
      dicData: [{
        label: '字典1',
        value: 0
      }, {
        label: '字典2',
        value: 1
      }],
      disabled: true
    }
  ]
});
</script>

禁用选项

效果预览可直接操作下方示例

返回的字典中数据配置disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '下拉框',
      prop: 'select',
      type: 'select',
      dicData: [{
        label: '字典1',
        value: 0,
        disabled: true
      }, {
        label: '字典2',
        value: 1
      }]
    }
  ]
});
</script>

可清空

效果预览可直接操作下方示例

使用clearable属性即可得到一个可清空的输入框,默认为true

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '下拉框',
      prop: 'input',
      type: 'select',
      clearable: false,
      dicData: [
        { label: '字典1', value: 0 },
        { label: '字典2', value: 1 }
      ]
    }
  ]
});
</script>

辅助语

效果预览可直接操作下方示例

配置下拉数据中desc字段

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '下拉框',
    prop: 'select',
    type: 'select',
    dicData: [{
      label: '字典1',
      desc: '字典描述',
      value: 0
    }, {
      label: '字典2',
      value: 1
    }]
  }]
});
</script>

字典属性

指定标签文本和值，默认为label和value

效果预览可直接操作下方示例

配置props属性来指定标签文本和值，默认为label和value

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '下拉框',
    prop: 'select',
    type: 'select',
    props: {
      label: 'name',
      value: 'code'
    },
    dicData: [{
      name: '字典1',
      code: 0
    }, {
      name: '字典2',
      code: 1
    }]
  }]
});
</script>

下拉框样式

.popperClass .el-select-dropdown__item{
  background-color: rgba(0,0,0,.2);
}

效果预览可直接操作下方示例

popperClass属性配置样式的class名字,字典中class属性为单个框下拉样式

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '下拉框',
      prop: 'select',
      type: 'select',
      popperClass: 'popperClass',
      dicData: [
        {
          label: '字典1',
          class: 'test',
          value: 0
        },
        {
          label: '字典2',
          value: 1
        }
      ]
    }
  ]
});
</script>

网络字典

更多用法参考表单数据字典

效果预览可直接操作下方示例

配置dicUrl指定后台接口的地址

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '下拉框',
    prop: 'select2',
    type: 'select',
    props: {
      label: 'name',
      value: 'code'
    },
    dicUrl: 'https://api.avuejs.com/area/getProvince'
  }]
});
</script>

基础多选

效果预览可直接操作下方示例

设置multiple属性即可启用多选，此时值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapseTags属性将它们合并为一段文字,同时配合maxCollapseTags最大显示个数和collapseTagsTooltip是否折叠提示,limit限制选择个数

正在加载示例…

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const dicData = [
  { label: '字典1', value: 0 },
  { label: '字典2', value: 1 },
  { label: '字典3', value: 2 }
];

const form = ref({
  select: [0, 1, 2]
});

const option = ref({
  column: [
    {
      label: '下拉框',
      prop: 'select',
      type: 'select',
      multiple: true,
      limit: 3,
      dicData
    },
    {
      label: '下拉框',
      prop: 'select',
      type: 'select',
      multiple: true,
      collapseTags: true,
      maxCollapseTags: 3,
      limit: 3,
      collapseTagsTooltip: true,
      dicData
    }
  ]
});
</script>

创建条目和搜索

效果预览可直接操作下方示例

使用allowCreate属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const option = ref({
  column: [
    {
      label: "创建",
      prop: "select",
      type: "select",
      allowCreate: true,
      multiple: true,
      filterable: true,
      removeTag: value => {
        ElMessage.success(`已删除: ${value}`);
        return true;
      },
      dicData: [
        {
          label: "字典1",
          value: 0,
        },
        {
          label: "字典2",
          value: 1,
        },
      ],
    },
  ],
});
</script>

自定义模板

效果预览可直接操作下方示例

配置props名称加Type卡槽开启即可自定义下拉框的内容,typeformat配置回显的内容,但是你提交的值还是value并不会改变

正在加载示例…

<template>
  <avue-form :option="option"
             v-model:form="form"
             ref="formRef">
    <template #province-type="{ item, value, label }">
      <img src="/images/logo.png"
           style="width:20px" />
      <span>{{ item.name }}</span>
    </template>
  </avue-form>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const form = ref({
  province: '120000'
});

const option = ref({
  column: [
    {
      label: '单选',
      prop: 'province',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: 'https://api.avuejs.com/area/getProvince',
      typeformat (item, label, value) {
        return `值:${item[label]}-名:${item[value]}`;
      },
      change (val) {
        setSelectImg(val);
      },
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    }
  ]
});

function setSelectImg (val) {
  nextTick(() => {
    const provinceRef = formRef.value.getPropRef('province');
    if (provinceRef) {
      const img = provinceRef.$el.querySelector('img');
      if (img) {
        img.setAttribute('style', `
          background: url('/images/logo.png') no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          padding-left:20px;
          text-indent: 30px;
        `);
      }
    }
  });
}

const formRef = ref(null);
</script>

多级联动

效果预览可直接操作下方示例

cascader为需要联动的子选择框prop值，填写多个就会形成一对多的关系

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script setup>
import { ref } from 'vue';

const baseUrl = 'https://api.avuejs.com/area';

const form = ref({
  province: '110000',
  city: '110100',
  area: '110101'
});

const option = ref({
  column: [{
    label: '省份',
    prop: 'province',
    type: 'select',
    props: {
      label: 'name',
      value: 'code'
    },
    cascader: ['city'],
    dicUrl: `${baseUrl}/getProvince`,
    rules: [
      {
        required: true,
        message: '请选择省份',
        trigger: 'blur'
      }
    ]
  },
  {
    label: '城市',
    prop: 'city',
    type: 'select',
    cascader: ['area'],
    props: {
      label: 'name',
      value: 'code'
    },
    row: true,
    dicUrl: `${baseUrl}/getCity/{{key}}?province={{province}}`,
    rules: [
      {
        required: true,
        message: '请选择城市',
        trigger: 'blur'
      }
    ]
  },
  {
    label: '地区',
    prop: 'area',
    type: 'select',
    props: {
      label: 'name',
      value: 'code'
    },
    dicUrl: `${baseUrl}/getArea/{{key}}?city={{city}}`,
    rules: [
      {
        required: true,
        message: '请选择地区',
        trigger: 'blur'
      }
    ]
  }]
});
</script>

远程搜索

当你的下拉框数据量很大的时候，你可以启动远程搜索

效果预览可直接操作下方示例

配置remote为true即可开启远程搜索，其中dicUrl中'{{key}}'为用户输入的关键字

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const baseUrl = 'https://api.avuejs.com/area';

const form = ref({
  province: '110000',
  province1: '110000,120000,130000,140000'
});

const option = ref({
  column: [
    {
      label: '省份单选',
      prop: 'province',
      type: 'select',
      remote: true,
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getProvince?id={{key}}`,
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '省份多选',
      prop: 'province1',
      type: 'select',
      multiple: true,
      remote: true,
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getProvince?id={{key}}`,
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    }
  ]
});
</script>

分组

效果预览可直接操作下方示例

配置group为true即可开启分组模式

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  select: 'Shanghai'
});

const option = ref({
  column: [
    {
      label: '分组',
      prop: 'select',
      type: 'select',
      group: true,
      dicData: [
        {
          label: '热门城市',
          groups: [
            { value: 'Shanghai', label: '上海', desc: '描述' },
            { value: 'Beijing', label: '北京' }
          ]
        },
        {
          label: '城市名',
          groups: [
            { value: 'Chengdu', label: '成都' },
            { value: 'Shenzhen', label: '深圳' },
            { value: 'Guangzhou', label: '广州' },
            { value: 'Dalian', label: '大连' }
          ]
        }
      ]
    }
  ]
});
</script>

拖拽

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/Sortable/1.10.0-rc2/Sortable.min.js"></script>

效果预览可直接操作下方示例

配置drag为true即可开启拖拽模式

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  select: ['Shanghai', 'Beijing', 'Shenzhen']
});

const option = ref({
  column: [
    {
      label: '拖拽',
      prop: 'select',
      type: 'select',
      drag: true,
      multiple: true,
      dicData: [
        { value: 'Shanghai', label: '上海' },
        { value: 'Beijing', label: '北京' },
        { value: 'Shenzhen', label: '深圳' }
      ]
    }
  ]
});
</script>