props.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import { defineProps } from '../../libs/util/props';
  2. import theme from '../../libs/config/theme.js'
  3. export default defineProps('tree', {
  4. // 数据
  5. data: {
  6. type: Array,
  7. default: () => []
  8. },
  9. // 选项名称映射的字段名
  10. keyField: {
  11. type: String,
  12. default: 'key'
  13. },
  14. // 展示值映射的字段名
  15. labelField: {
  16. type: String,
  17. default: 'label'
  18. },
  19. // 子级值映射的字段名
  20. childrenField: {
  21. type: String,
  22. default: 'children'
  23. },
  24. // 是否是叶子节点的字段名
  25. isLeafField: {
  26. type: String,
  27. default: 'isLeaf'
  28. },
  29. // 是否禁用的字段名
  30. disabledField: {
  31. type: String,
  32. default: 'disabled'
  33. },
  34. // 默认选中多选项
  35. defaultCheckedKeys: {
  36. type: Array,
  37. default: () => []
  38. },
  39. // 默认展开项
  40. defaultExpandedKeys: {
  41. type: Array,
  42. default: () => []
  43. },
  44. // 受控的选中多选项
  45. checkedKeys: {
  46. type: Array,
  47. default: undefined
  48. },
  49. // 受控的展开项
  50. expandedKeys: {
  51. type: Array,
  52. default: undefined
  53. },
  54. // 是否可选择
  55. checkable: {
  56. type: Boolean,
  57. default: false
  58. },
  59. // 是否可选择
  60. selectable: {
  61. type: Boolean,
  62. default: false
  63. },
  64. // 是否级联
  65. cascade: {
  66. type: Boolean,
  67. default: false
  68. },
  69. // 是否允许点击节点展开/收缩
  70. expandOnClick: {
  71. type: Boolean,
  72. default: false
  73. },
  74. // 是否允许点击节点勾选/取消勾选
  75. checkOnClick: {
  76. type: Boolean,
  77. default: false
  78. },
  79. // 异步加载节点数据
  80. loadNode: {
  81. type: Function,
  82. default: null
  83. },
  84. // 是否允许勾选未加载的节点
  85. allowCheckingNotLoaded: {
  86. type: Boolean,
  87. default: false
  88. },
  89. // 搜索过滤
  90. pattern: {
  91. type: String,
  92. default: ''
  93. },
  94. // 是否显示搜索无关的节点
  95. showIrrelevantNodes: {
  96. type: Boolean,
  97. default: true
  98. },
  99. // 外观
  100. indentWidth: {
  101. type: [Number, String],
  102. default: 24
  103. },
  104. // 是否显示展开/收缩按钮
  105. showSwitcher: {
  106. type: Boolean,
  107. default: true
  108. },
  109. // 展开图标
  110. expandIcon: {
  111. type: String,
  112. default: 'arrow-right-fill'
  113. },
  114. // 收缩图标
  115. collapseIcon: {
  116. type: String,
  117. default: 'arrow-down-fill'
  118. },
  119. // loading的颜色
  120. loadingColor: {
  121. type: String,
  122. default: ''
  123. },
  124. // checkebox选中颜色
  125. checkedColor: {
  126. type: String,
  127. default: ''
  128. },
  129. // 是否可旋转展开/收缩按钮
  130. rotatableSwitcher: {
  131. type: Boolean,
  132. default: false
  133. },
  134. // 高亮背景颜色
  135. highlightBgColor: {
  136. type: String,
  137. default: '#f9ae3d'
  138. },
  139. // 选中背景颜色
  140. selectedBgColor: {
  141. type: String,
  142. default: '#f3f4f6'
  143. },
  144. // 展开/收缩按钮大小
  145. switcherSize: {
  146. type: [Number, String],
  147. default: 14
  148. },
  149. // 展开/收缩按钮颜色
  150. switcherColor: {
  151. type: String,
  152. default: '#909399'
  153. }
  154. })