表单数据格式

数据类型

• 组件正常接受数据格式为数组[1,2,3,4],而后台返回的类型为字符串1,2,3,4,设置dataType来进行数据转化
• 数据为字符串，字典类型为数字，设置dataType统一数据类型

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

有些数据是数组形式的，我们传入字符串是无法识别的，解决数据字典和字段类型不匹配问题,配置dataType属性(string / number),separator配置分隔符，默认为,

正在加载示例…

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

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

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

const obj = ref({
  cascader: '1,2',
  province: 120000,
  radio: 1,
  checkbox: '1,2,3',
  selects: '1|2|3'
});

const option = ref({
  column: [
    {
      label: '单选',
      prop: 'radio',
      type: 'radio',
      dataType: 'number',
      dicData: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        { label: '选项3', value: 3 }
      ]
    },
    {
      label: '多选',
      prop: 'checkbox',
      type: 'checkbox',
      dataType: 'number',
      dicData: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        { label: '选项3', value: 3 }
      ]
    },
    {
      label: '多选',
      prop: 'selects',
      type: 'select',
      separator: '|',
      multiple: true,
      dicData: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    },
    {
      label: '级联',
      prop: 'cascader',
      type: 'cascader',
      dataType: 'string',
      dicData: [
        {
          label: '级别1',
          value: 1,
          children: [{ label: '级别2', value: 2 }]
        }
      ],
      rules: [
        {
          required: true,
          message: '请选择级联',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '省份',
      prop: 'province',
      type: 'select',
      dataType: 'number',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getProvince`,
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    }
  ]
});
</script>

深层结构数据

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

bind绑定的对象数据是双向的，改变任意一个，另外一个也会改变

正在加载示例…

<template>
  <el-button type="primary"
             @click="form.deep.deep.deep.value = '改变deep.deep.deep.value值'">改变deep.deep.deep.value值</el-button>
  <el-button type="primary"
             @click="form.test = '改变test值'">改变test值</el-button>
  <br /><br />
  {{ form }}
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

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

const form = ref({
  deep: {
    deep: {
      deep: {
        value: 1
      }
    }
  },
  test: ''
});

const option = ref({
  labelWidth: 120,
  column: [
    {
      label: '我是深结构',
      prop: 'test',
      bind: 'deep.deep.deep.value'
    }
  ]
});
</script>

数据过滤

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

filterDic设置为true返回的对象不会包含$前缀的字典翻译, filterNull设置为true返回的对象不会包含空数据的字段

正在加载示例…

<template>
  <el-button type="danger"
             @click="filterDic">过滤数据字典</el-button>
  <el-button type="success"
             @click="filterNull">过滤空数据</el-button>
  <el-button type="primary"
             @click="filter">不过滤</el-button>
  <p>{{ form }}</p>
  <avue-form :key="reload"
             v-model="form"
             :option="option"></avue-form>
</template>

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

// State
const reload = ref(Math.random());
const form = ref({
  cascader: [0, 1],
  tree: 0
});
const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '级别',
      prop: 'cascader',
      type: 'cascader',
      dicData: [
        {
          label: '一级',
          value: 0,
          children: [
            { label: '一级1', value: 1 },
            { label: '一级2', value: 2 }
          ]
        }
      ]
    },
    {
      label: '树型',
      prop: 'tree',
      type: 'tree',
      dicData: [
        {
          label: '一级',
          value: 0,
          children: [
            { label: '一级1', value: 1 },
            { label: '一级2', value: 2 }
          ]
        }
      ]
    }
  ]
});

// Methods
const refresh = () => {
  reload.value = Math.random();
};

const filter = () => {
  option.value.filterDic = false;
  option.value.filterNull = false;
  refresh();
};

const filterDic = () => {
  option.value.filterDic = true;
  refresh();
};

const filterNull = () => {
  option.value.filterNull = true;
  refresh();
};
</script>

清空过滤字段

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

filterParams为点击清空按钮，表单不会清除的数据，默认主键rowKey是不会清空的，默认为id

正在加载示例…

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

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

// 创建响应式数据
const form = ref({
  name: 'smallwei',
  cascader: [0, 1],
  tree: 0
});

const option = ref({
  filterParams: ['name'],
  column: [
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '级别',
      prop: 'cascader',
      type: 'cascader',
      dicData: [
        {
          label: '一级',
          value: 0,
          children: [
            {
              label: '一级1',
              value: 1,
            },
            {
              label: '一级2',
              value: 2,
            }
          ]
        }
      ]
    },
    {
      label: '树型',
      prop: 'tree',
      type: 'tree',
      dicData: [
        {
          label: '一级',
          value: 0,
          children: [
            {
              label: '一级1',
              value: 1,
            },
            {
              label: '一级2',
              value: 2,
            }
          ]
        }
      ]
    }
  ]
});
</script>