uni-tr.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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. if(this.root){
  66. this.border = this.root.border
  67. this.selection = this.root.type
  68. this.root.trChildren.push(this)
  69. const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
  70. if(rowData){
  71. this.rowData = rowData
  72. }
  73. this.root.isNodata()
  74. }
  75. },
  76. mounted() {
  77. if (this.widthThArr.length > 0) {
  78. const selectionWidth = this.selection === 'selection' ? 50 : 0
  79. if(this.root){
  80. this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
  81. }
  82. }
  83. },
  84. // #ifndef VUE3
  85. destroyed() {
  86. if(this.root){
  87. const index = this.root.trChildren.findIndex(i => i === this)
  88. this.root.trChildren.splice(index, 1)
  89. this.root.isNodata()
  90. }
  91. },
  92. // #endif
  93. // #ifdef VUE3
  94. unmounted() {
  95. if(this.root){
  96. const index = this.root.trChildren.findIndex(i => i === this)
  97. this.root.trChildren.splice(index, 1)
  98. this.root.isNodata()
  99. }
  100. },
  101. // #endif
  102. methods: {
  103. minWidthUpdate(width) {
  104. this.widthThArr.push(width)
  105. },
  106. // 选中
  107. checkboxSelected(e) {
  108. if(this.root){
  109. let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
  110. this.checked = e.checked
  111. this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
  112. }
  113. },
  114. change(e) {
  115. if(this.root){
  116. this.root.trChildren.forEach(item => {
  117. if (item === this) {
  118. this.root.check(this, e.detail.value.length > 0 ? true : false)
  119. }
  120. })
  121. }
  122. },
  123. /**
  124. * 获取父元素实例
  125. */
  126. getTable(name = 'uniTable') {
  127. let parent = this.$parent
  128. let parentName = parent.$options.name
  129. while (parentName !== name) {
  130. parent = parent.$parent
  131. if (!parent) return false
  132. parentName = parent.$options.name
  133. }
  134. return parent
  135. },
  136. bindClick(e){
  137. this.$emit("click",e)
  138. e.stopPropagation()
  139. },
  140. bindLongtap(e){
  141. this.$emit("longclick",e)
  142. e.stopPropagation()
  143. }
  144. }
  145. }
  146. </script>
  147. <style lang="scss">
  148. $border-color: #ebeef5;
  149. .uni-table-tr {
  150. /* #ifndef APP-NVUE */
  151. display: table-row;
  152. transition: all 0.3s;
  153. box-sizing: border-box;
  154. /* #endif */
  155. }
  156. .uni-table-checked{
  157. background: #ffff7f;
  158. th{
  159. background: #ffff7f;
  160. }
  161. }
  162. .checkbox {
  163. padding: 0 8px;
  164. width: 26px;
  165. padding-left: 12px;
  166. /* #ifndef APP-NVUE */
  167. display: table-cell;
  168. vertical-align: middle;
  169. /* #endif */
  170. color: #333;
  171. font-weight: 500;
  172. border-bottom: 1px $border-color solid;
  173. font-size: 14px;
  174. // text-align: center;
  175. }
  176. .tr-table--border {
  177. border-right: 1px $border-color solid;
  178. }
  179. /* #ifndef APP-NVUE */
  180. .uni-table-tr {
  181. ::v-deep .uni-table-th {
  182. &.table--border:last-child {
  183. // border-right: none;
  184. }
  185. }
  186. ::v-deep .uni-table-td {
  187. &.table--border:last-child {
  188. // border-right: none;
  189. }
  190. }
  191. }
  192. /* #endif */
  193. </style>