基础用法

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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 中可能会给浏览器带来负担，从而造成性能问题。 为了更好的用户和开发者体验

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

默认值

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

禁用状态

vue2

vue3

通过`disabled`属性指定是否禁用

<template>
  <tvue-form :option="option"></tvue-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>

禁用选项

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

可清空

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

辅助语

vue2

vue3

配置下拉数据中`desc`字段

<template>
  <tvue-form :option="option"></tvue-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

form/form-select/dic-local

下拉框样式

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

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

网络字典

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

vue2

vue3

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

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

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

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

基础多选

vue2

vue3

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

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-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>

创建条目和搜索

vue2

vue3

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

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

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

const option = ref({
  column: [
    {
      label: '创建',
      prop: 'select',
      type: 'select',
      allowCreate: true,
      filterable: true,
      dicData: [
        {
          label: '字典1',
          value: 0
        },
        {
          label: '字典2',
          value: 1
        }
      ]
    }
  ]
});
</script>

自定义模板

vue2

vue3

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

<template>
  <tvue-form :option="option"
             v-model:form="form"
             ref="formRef">
    <template #province-type="{ item, value, label }">
      <img src="/logo.png"
           style="width:20px" />
      <span>{{ item.name }}</span>
    </template>
  </tvue-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://cli.avuejs.com/api/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('/logo.png') no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          padding-left:20px;
          text-indent: 30px;
        `);
      }
    }
  });
}

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

多级联动

vue2

vue3

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

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

const baseUrl = 'https://cli.avuejs.com/api/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>

远程搜索

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

vue2

vue3

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

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

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

const baseUrl = 'https://cli.avuejs.com/api/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>

分组

vue2

vue3

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

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-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>

vue2

vue3

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

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-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>