数据字典

TIP

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

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

字典使用

暂无数据

本地字典只要配置dicData为一个Array数组即可，便会自动加载字典到对应的组件中，注意返回的字典中value类型和数据的类型必须要对应，比如都是字符串或者都是数字。

<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      data: [
        {
          province: '110000',
          cascader: [0, 1],
        }, {
          province: '130000',
          cascader: [0, 2],
        }
      ],
      option: {
        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'
          },
          dicUrl: `${baseUrl}/getProvince`
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

字典联动

暂无数据

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

<template>
  <avue-crud ref="crud"
             :data="data"
             :option="option"></avue-crud>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      data: [],
      option: {
        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'
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.data = [
      {
        name: '张三',
        sex: '男',
        province: '110000',
        city: '110100',
        area: '110101',
      }, {
        name: '李四',
        sex: '女',
        province: '130000',
        city: '130200',
        area: '130202',
      }
    ]
    this.$nextTick(() => {
      //放在数据加载完后执行
      this.$refs.crud.dicInit('cascader');
    })
  }
}
</script>

显示代码复制代码复制代码