数据字典
约 221 字小于 1 分钟
2025-2-5
提示
更多字典详细用法参考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>