uni-tr.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <!-- #ifdef H5 -->
  3. <tr class="uni-table-tr" :class="checkedRow?'uni-table-checked':''" @click="bindClick" @tap="bindClick" @longpress="bindLongtap">
  4. <th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
  5. <table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
  6. </th>
  7. <slot></slot>
  8. <!-- <uni-th class="th-fixed">123</uni-th> -->
  9. </tr>
  10. <!-- #endif -->
  11. <!-- #ifndef H5 -->
  12. <view class="uni-table-tr" :class="checkedRow?'uni-table-checked':''" @click="bindClick" @tap="bindClick" @longpress="bindLongtap">
  13. <view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
  14. <table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
  15. </view>
  16. <slot></slot>
  17. </view>
  18. <!-- #endif -->
  19. </template>
  20. <script>
  21. import tableCheckbox from './table-checkbox.vue'
  22. /**
  23. * Tr 表格行组件
  24. * @description 表格行组件 仅包含 th,td 组件
  25. * @tutorial https://ext.dcloud.net.cn/plugin?id=
  26. */
  27. export default {
  28. name: 'uniTr',
  29. components: { tableCheckbox },
  30. props: {
  31. disabled: {
  32. type: Boolean,
  33. default: false
  34. },
  35. keyValue: {
  36. type: [String, Number],
  37. default: ''
  38. },
  39. checkedRow: {
  40. type: Boolean,
  41. default: false
  42. }
  43. },
  44. options: {
  45. virtualHost: true
  46. },
  47. data() {
  48. return {
  49. value: false,
  50. border: false,
  51. selection: false,
  52. widthThArr: [],
  53. ishead: true,
  54. checked: false,
  55. indeterminate:false
  56. }
  57. },
  58. created() {
  59. this.root = this.getTable()
  60. this.head = this.getTable('uniThead')
  61. if (this.head) {
  62. this.ishead = false
  63. this.head.init(this)
  64. }
  65. this.border = this.root.border
  66. this.selection = this.root.type
  67. this.root.trChildren.push(this)
  68. const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
  69. if(rowData){
  70. this.rowData = rowData
  71. }
  72. this.root.isNodata()
  73. },
  74. mounted() {
  75. if (this.widthThArr.length > 0) {
  76. const selectionWidth = this.selection === 'selection' ? 50 : 0
  77. this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
  78. }
  79. },
  80. // #ifndef VUE3
  81. destroyed() {
  82. const index = this.root.trChildren.findIndex(i => i === this)
  83. this.root.trChildren.splice(index, 1)
  84. this.root.isNodata()
  85. },
  86. // #endif
  87. // #ifdef VUE3
  88. unmounted() {
  89. const index = this.root.trChildren.findIndex(i => i === this)
  90. this.root.trChildren.splice(index, 1)
  91. this.root.isNodata()
  92. },
  93. // #endif
  94. methods: {
  95. minWidthUpdate(width) {
  96. this.widthThArr.push(width)
  97. },
  98. // 选中
  99. checkboxSelected(e) {
  100. let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
  101. this.checked = e.checked
  102. this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
  103. },
  104. change(e) {
  105. this.root.trChildren.forEach(item => {
  106. if (item === this) {
  107. this.root.check(this, e.detail.value.length > 0 ? true : false)
  108. }
  109. })
  110. },
  111. /**
  112. * 获取父元素实例
  113. */
  114. getTable(name = 'uniTable') {
  115. let parent = this.$parent
  116. let parentName = parent.$options.name
  117. while (parentName !== name) {
  118. parent = parent.$parent
  119. if (!parent) return false
  120. parentName = parent.$options.name
  121. }
  122. return parent
  123. },
  124. bindClick(e){
  125. this.$emit("click",e)
  126. e.stopPropagation()
  127. },
  128. bindLongtap(e){
  129. this.$emit("longclick",e)
  130. e.stopPropagation()
  131. }
  132. }
  133. }
  134. </script>
  135. <style lang="scss">
  136. $border-color: #ebeef5;
  137. .uni-table-tr {
  138. /* #ifndef APP-NVUE */
  139. display: table-row;
  140. transition: all 0.3s;
  141. box-sizing: border-box;
  142. /* #endif */
  143. }
  144. .uni-table-checked{
  145. background: #ffff7f;
  146. th{
  147. background: #ffff7f;
  148. }
  149. }
  150. .checkbox {
  151. padding: 0 8px;
  152. width: 26px;
  153. padding-left: 12px;
  154. /* #ifndef APP-NVUE */
  155. display: table-cell;
  156. vertical-align: middle;
  157. /* #endif */
  158. color: #333;
  159. font-weight: 500;
  160. border-bottom: 1px $border-color solid;
  161. font-size: 14px;
  162. // text-align: center;
  163. }
  164. .tr-table--border {
  165. border-right: 1px $border-color solid;
  166. }
  167. /* #ifndef APP-NVUE */
  168. .uni-table-tr {
  169. ::v-deep .uni-table-th {
  170. &.table--border:last-child {
  171. // border-right: none;
  172. }
  173. }
  174. ::v-deep .uni-table-td {
  175. &.table--border:last-child {
  176. // border-right: none;
  177. }
  178. }
  179. }
  180. /* #endif */
  181. </style>