column.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import Cell from '../../cell'
  2. import { UtilTools } from '../../tools'
  3. const props = {
  4. // 列唯一主键
  5. colId: [String, Number],
  6. // 渲染类型 seq,radio,checkbox,expand
  7. type: String,
  8. // 在 v3.0 中废弃 prop
  9. prop: String,
  10. // 在 v3.0 中废弃 label
  11. label: String,
  12. // 列字段名
  13. field: String,
  14. // 列标题
  15. title: String,
  16. // 列宽度
  17. width: [Number, String],
  18. // 列最小宽度,把剩余宽度按比例分配
  19. minWidth: [Number, String],
  20. // 是否允许拖动列宽调整大小
  21. resizable: { type: Boolean, default: null },
  22. // 将列固定在左侧或者右侧
  23. fixed: String,
  24. // 列对其方式
  25. align: String,
  26. // 表头对齐方式
  27. headerAlign: String,
  28. // 表尾列的对齐方式
  29. footerAlign: String,
  30. // 当内容过长时显示为省略号
  31. showOverflow: { type: [Boolean, String], default: null },
  32. // 当表头内容过长时显示为省略号
  33. showHeaderOverflow: { type: [Boolean, String], default: null },
  34. // 当表尾内容过长时显示为省略号
  35. showFooterOverflow: { type: [Boolean, String], default: null },
  36. // 给单元格附加 className
  37. className: [String, Function],
  38. // 给表头单元格附加 className
  39. headerClassName: [String, Function],
  40. // 给表尾单元格附加 className
  41. footerClassName: [String, Function],
  42. // 格式化显示内容
  43. formatter: [Function, Array, String],
  44. // 自定义索引方法
  45. seqMethod: Function,
  46. // 在 v3.0 中废弃 indexMethod
  47. indexMethod: Function,
  48. // 是否允许排序
  49. sortable: Boolean,
  50. // 在 v3 中废弃
  51. remoteSort: { type: Boolean, default: null },
  52. // 在 v3 中只支持字符串类型
  53. sortBy: [String, Array],
  54. // 排序的字段类型,比如字符串转数值等
  55. sortType: String,
  56. // 在 v3 中废弃
  57. sortMethod: Function,
  58. // 配置筛选条件数组
  59. filters: { type: Array, default: null },
  60. // 筛选是否允许多选
  61. filterMultiple: { type: Boolean, default: true },
  62. // 自定义筛选方法
  63. filterMethod: Function,
  64. // 筛选重置方法
  65. filterResetMethod: Function,
  66. // 筛选复原方法
  67. filterRecoverMethod: Function,
  68. // 筛选模板配置项
  69. filterRender: Object,
  70. // 指定为树节点
  71. treeNode: Boolean,
  72. // 是否可视
  73. visible: { type: Boolean, default: null },
  74. // 单元格数据导出方法
  75. exportMethod: Function,
  76. // 表尾单元格数据导出方法
  77. footerExportMethod: Function,
  78. // 标题帮助图标配置项
  79. titleHelp: Object,
  80. // 单元格值类型
  81. cellType: String,
  82. // 单元格渲染配置项
  83. cellRender: Object,
  84. // 单元格编辑渲染配置项
  85. editRender: Object,
  86. // 内容渲染配置项
  87. contentRender: Object,
  88. // 额外的参数
  89. params: Object
  90. }
  91. const watch = {}
  92. Object.keys(props).forEach(name => {
  93. watch[name] = function (value) {
  94. this.columnConfig.update(name, value)
  95. }
  96. })
  97. export default {
  98. name: 'VxeColumn',
  99. props,
  100. provide () {
  101. return {
  102. $xecolumn: this
  103. }
  104. },
  105. inject: {
  106. $xetable: {
  107. default: null
  108. },
  109. $xecolumn: {
  110. default: null
  111. }
  112. },
  113. watch,
  114. created () {
  115. this.$xetable.isSC = true
  116. this.columnConfig = this.createColumn(this.$xetable, this)
  117. },
  118. mounted () {
  119. UtilTools.assemColumn(this)
  120. if (this.type === 'expand' && !this.$scopedSlots.content && this.$scopedSlots.default) {
  121. UtilTools.warn('vxe.error.expandContent')
  122. }
  123. },
  124. destroyed () {
  125. UtilTools.destroyColumn(this)
  126. },
  127. render (h) {
  128. return h('div', this.$slots.default)
  129. },
  130. methods: Cell
  131. }