提示

更多字典详细用法参考Form 组件数据字典

//使用字典需要引入axios
import axios from "axios";
const app = createApp({});
app.use(Avue, { axios });

字典使用

vue2

vue3

暂无数据

本地字典配置`dicData`为一个`Array`数组，网络字典可以配置`dicUrl`字段，自动加载字典到对应的组件中，注意返回的字典中 value 类型和数据的类型必须要对应，比如都是字符串或者都是数字。配置`dicFlag`为`true`，打开表单的时候会重新请求字典

<template>
  <tvue-crud :data="data"
             :option="option" />
</template>

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

const data = ref([
  {
    province: '110000',
    cascader: [0, 1],
  },
  {
    province: '130000',
    cascader: [0, 2],
  }
]);

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

const option = ref({
  column: [
    {
      label: '本地字典',
      prop: 'cascader',
      type: 'cascader',
      dicData: [
        {
          label: '一级',
          value: 0,
          children: [
            {
              label: '一级1',
              value: 1,
            },
            {
              label: '一级2',
              value: 2,
            }
          ]
        }
      ],
    },
    {
      label: '网络字典',
      prop: 'province',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicFlag: true,
      dicUrl: `${baseUrl}/getProvince`
    }
  ]
});
</script>

字典联动

vue2

vue3

暂无数据

`cascader`为需要联动的子选择框`prop`值，填写多个就会形成一对多的关系，表格加载联动数据需要调用内置方法`dicInit`

<template>
  <tvue-crud ref="crud"
             :data="data"
             :option="option"></tvue-crud>
</template>

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

const baseUrl = 'https://cli.avuejs.com/api/area';
const crud = ref(null)
const data = ref([]);
const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '性别',
      prop: 'sex',
    },
    {
      label: '省份',
      prop: 'province',
      type: 'select',
      cascader: ['city'],
      cascaderIndex: 1,
      props: {
        label: 'name',
        value: 'code',
      },
      dicUrl: `${baseUrl}/getProvince`,
    },
    {
      width: 120,
      label: '城市',
      prop: 'city',
      type: 'select',
      cascader: ['area'],
      cascaderIndex: 1,
      cell: true,
      props: {
        label: 'name',
        value: 'code',
      },
      dicUrl: `${baseUrl}/getCity/{{key}}`,
      rules: [
        {
          required: true,
          message: '请选择城市',
          trigger: 'blur',
        },
      ],
    },
    {
      width: 120,
      label: '地区',
      prop: 'area',
      cell: true,
      props: {
        label: 'name',
        value: 'code',
      },
      type: 'select',
      dicUrl: `${baseUrl}/getArea/{{key}}`,
      rules: [
        {
          required: true,
          message: '请选择地区',
          trigger: 'blur',
        },
      ],
    },
  ],
});

onMounted(() => {
  data.value = [
    {
      name: '张三',
      sex: '男',
      province: '110000',
      city: '110100',
      area: '110101',
    },
    {
      name: '李四',
      sex: '女',
      province: '130000',
      city: '130200',
      area: '130202',
    },
  ];
  //加载完数据后调用
  nextTick(() => {
    crud.value.dicInit('cascader');
  });
});
</script>