Crud 模块

列本地字典

字典 - 图1

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

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

后台接口列字典

字典 - 图2

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

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