Crud 模块

列本地字典

字典 - 图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>