uni-th.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <!-- #ifdef H5 -->
  3. <th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
  4. <view class="uni-table-th-row">
  5. <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
  6. <slot></slot>
  7. <view v-if="sortable" class="arrow-box">
  8. <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
  9. <text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
  10. </view>
  11. </view>
  12. <dropdown :field="field" v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
  13. </view>
  14. </th>
  15. <!-- #endif -->
  16. <!-- #ifndef H5 -->
  17. <view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
  18. <!-- #endif -->
  19. </template>
  20. <script>
  21. import dropdown from './filter-dropdown.vue'
  22. /**
  23. * Th 表头
  24. * @description 表格内的表头单元格组件
  25. * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
  26. * @property {Number} width 单元格宽度
  27. * @property {Boolean} sortable 是否启用排序
  28. * @property {Number} align = [left|center|right] 单元格对齐方式
  29. * @value left 单元格文字左侧对齐
  30. * @value center 单元格文字居中
  31. * @value right 单元格文字右侧对齐
  32. * @property {Array} filterData 筛选数据
  33. * @property {String} filterType [search|select] 筛选类型
  34. * @value search 关键字搜素
  35. * @value select 条件选择
  36. * @event {Function} sort-change 排序触发事件
  37. */
  38. export default {
  39. name: 'uniTh',
  40. options: {
  41. virtualHost: true
  42. },
  43. components: {
  44. dropdown
  45. },
  46. emits:['sort-change','filter-change'],
  47. props: {
  48. width: {
  49. type: [String, Number],
  50. default: ''
  51. },
  52. align: {
  53. type: String,
  54. default: 'left'
  55. },
  56. field: {
  57. type: String,
  58. default: ''
  59. },
  60. rowspan: {
  61. type: [Number, String],
  62. default: 1
  63. },
  64. colspan: {
  65. type: [Number, String],
  66. default: 1
  67. },
  68. sortable: {
  69. type: Boolean,
  70. default: false
  71. },
  72. filterType: {
  73. type: String,
  74. default: ""
  75. },
  76. filterData: {
  77. type: Array,
  78. default () {
  79. return []
  80. }
  81. }
  82. },
  83. data() {
  84. return {
  85. border: false,
  86. ascending: false,
  87. descending: false
  88. }
  89. },
  90. computed: {
  91. contentAlign() {
  92. let align = 'left'
  93. switch (this.align) {
  94. case 'left':
  95. align = 'flex-start'
  96. break
  97. case 'center':
  98. align = 'center'
  99. break
  100. case 'right':
  101. align = 'flex-end'
  102. break
  103. }
  104. return align
  105. }
  106. },
  107. created() {
  108. this.root = this.getTable('uniTable')
  109. this.rootTr = this.getTable('uniTr')
  110. this.rootTr.minWidthUpdate(this.width ? this.width : 140)
  111. this.border = this.root.border
  112. this.root.thChildren.push(this)
  113. },
  114. methods: {
  115. sort() {
  116. if (!this.sortable) return
  117. this.clearOther()
  118. if (!this.ascending && !this.descending) {
  119. this.ascending = true
  120. this.$emit('sort-change', {property:this.field, order: 'ascending' })
  121. return
  122. }
  123. if (this.ascending && !this.descending) {
  124. this.ascending = false
  125. this.descending = true
  126. this.$emit('sort-change', {property:this.field, order: 'descending' })
  127. return
  128. }
  129. if (!this.ascending && this.descending) {
  130. this.ascending = false
  131. this.descending = false
  132. this.$emit('sort-change', { property:this.field, order: null })
  133. }
  134. },
  135. ascendingFn() {
  136. this.clearOther()
  137. this.ascending = !this.ascending
  138. this.descending = false
  139. this.$emit('sort-change', {property:this.field, order: this.ascending ? 'ascending' : null })
  140. },
  141. descendingFn() {
  142. this.clearOther()
  143. this.descending = !this.descending
  144. this.ascending = false
  145. this.$emit('sort-change', {property:this.field, order: this.descending ? 'descending' : null })
  146. },
  147. clearOther() {
  148. this.root.thChildren.map(item => {
  149. if (item !== this) {
  150. item.ascending = false
  151. item.descending = false
  152. }
  153. return item
  154. })
  155. },
  156. ondropdown(e) {
  157. this.$emit("filter-change", e)
  158. },
  159. /**
  160. * 获取父元素实例
  161. */
  162. getTable(name) {
  163. let parent = this.$parent
  164. let parentName = parent.$options.name
  165. while (parentName !== name) {
  166. parent = parent.$parent
  167. if (!parent) return false
  168. parentName = parent.$options.name
  169. }
  170. return parent
  171. }
  172. }
  173. }
  174. </script>
  175. <style lang="scss">
  176. $border-color: #ebeef5;
  177. .uni-table-th {
  178. padding: 12px 10px;
  179. /* #ifndef APP-NVUE */
  180. display: table-cell;
  181. box-sizing: border-box;
  182. /* #endif */
  183. font-size: 14px;
  184. font-weight: bold;
  185. color: #909399;
  186. border-bottom: 1px $border-color solid;
  187. }
  188. .uni-table-th-row {
  189. /* #ifndef APP-NVUE */
  190. display: flex;
  191. /* #endif */
  192. flex-direction: row;
  193. }
  194. .table--border {
  195. border-right: 1px $border-color solid;
  196. }
  197. .uni-table-th-content {
  198. display: flex;
  199. align-items: center;
  200. flex: 1;
  201. }
  202. .arrow-box {
  203. }
  204. .arrow {
  205. display: block;
  206. position: relative;
  207. width: 10px;
  208. height: 8px;
  209. // border: 1px red solid;
  210. left: 5px;
  211. overflow: hidden;
  212. cursor: pointer;
  213. }
  214. .down {
  215. top: 3px;
  216. ::after {
  217. content: '';
  218. width: 8px;
  219. height: 8px;
  220. position: absolute;
  221. left: 2px;
  222. top: -5px;
  223. transform: rotate(45deg);
  224. background-color: #ccc;
  225. }
  226. &.active {
  227. ::after {
  228. background-color: #007aff;
  229. }
  230. }
  231. }
  232. .up {
  233. ::after {
  234. content: '';
  235. width: 8px;
  236. height: 8px;
  237. position: absolute;
  238. left: 2px;
  239. top: 5px;
  240. transform: rotate(45deg);
  241. background-color: #ccc;
  242. }
  243. &.active {
  244. ::after {
  245. background-color: #007aff;
  246. }
  247. }
  248. }
  249. </style>