uni-tr.vue 4.4 KB

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