• 字典
    • 普通用法
    • 后台接口列字典

    字典

    TIP

    1.0.0+

    普通用法

    字典 - 图1

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

    1. <avue-crud :data="data" :option="option" ></avue-crud>
    3. <script>
    4. export default {
    5.     data() {
    6.       return {
    7.         data: [
    8.           {
    9.             name:'张三',
    10.             sex:'男',
    11.             grade:1,
    12.             cascader:[0,1],
    13.             checkbox:[0,1],
    14.             tree:0,
    15.           }, {
    16.             name:'李四',
    17.             sex:'女',
    18.             grade:0,
    19.             cascader:[0,2],
    20.             checkbox:[0,1],
    21.             tree:1
    22.           }
    23.         ],
    24.         option:{
    25.           page:false,
    26.           align:'center',
    27.           menuAlign:'center',
    28.           column:[
    29.              {
    30.               label:'姓名',
    31.               prop:'name',
    32.             }, {
    33.               label:'性别',
    34.               prop:'sex'
    35.             },{
    36.               label:'权限',
    37.               prop:'grade',
    38.               type:'select',
    39.               dicData:[
    40.                 {
    41.                   label:'有权限',
    42.                   value:1
    43.                 },{
    44.                   label:'无权限',
    45.                   value:0
    46.                 },{
    47.                   label:'禁止项',
    48.                   disabled:true,
    49.                   value:-1
    50.                 }
    51.               ]
    52.             },{
    53.               label:'级别',
    54.               prop:'cascader',
    55.               type:'cascader',
    56.               dicData:[{
    57.                 label:'一级',
    58.                 value:0,
    59.                 children:[
    60.                   {
    61.                     label:'一级1',
    62.                     value:1,
    63.                   },{
    64.                     label:'一级2',
    65.                     value:2,
    66.                   }
    67.                 ]
    68.               }],
    69.             },
    70.             {
    71.               width:120,
    72.               label:'多选',
    73.               prop:'checkbox',
    74.               type:'checkbox',
    75.               span:24,
    76.               dicData:[{
    77.                 label:'有权限',
    78.                 value:1
    79.               },{
    80.                 label:'无权限',
    81.                 value:0
    82.               },{
    83.                 label:'禁止项',
    84.                 disabled:true,
    85.                 value:-1
    86.               }]
    87.             },
    88.             {
    89.               label:'树型',
    90.               prop:'tree',
    91.               type:'tree',
    92.               dicData:[{
    93.                 label:'一级',
    94.                 value:0,
    95.                 children:[
    96.                   {
    97.                     label:'一级1',
    98.                     value:1,
    99.                   },{
    100.                     label:'一级2',
    101.                     value:2,
    102.                   }
    103.                 ]
    104.               }]
    105.             }
    106.           ]
    107.         }
    108.       }
    109.     }
    110. }
    111. </script>

    后台接口列字典

    字典 - 图2

    如果你的后台字典不是本地字典，支持给每一列属性单独配置网络字典

    1. <avue-crud :data="data2" :option="option3" ></avue-crud>
    3. <script>
    4. export default {
    5.     data() {
    6.       return {
    7.         data2: [
    8.           {
    9.             name:'张三',
    10.             sex:'男',
    11.             grade:'110000'
    12.           }, {
    13.             name:'李四',
    14.             sex:'女',
    15.             grade:'120000'
    16.           }
    17.         ],
    18.         option3:{
    19.           page:false,
    20.           align:'center',
    21.           menuAlign:'center',
    22.           column:[
    23.              {
    24.               label:'姓名',
    25.               prop:'name',
    26.             }, {
    27.               label:'性别',
    28.               prop:'sex'
    29.             },{
    30.               label:'权限',
    31.               prop:'grade',
    32.               type:'select',
    33.               props: {
    34.                   label: 'name',
    35.                   value: 'code'
    36.               },
    37.               dicUrl:'https://cli2.avue.top/api/area/getProvince'
    38.             }
    39.           ]
    40.         }
    41.       }
    42.     }
    43. }
    44. </script>