uni-tr.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <view class="uni-table-tr">
  3. <checkbox-group v-if="selection === 'selection'" class="checkbox" :class="{'tr-table--border':border}" @change="change">
  4. <label>
  5. <checkbox value="check" :checked="value" :disabled="!selectable"/>
  6. </label>
  7. </checkbox-group>
  8. <slot></slot>
  9. </view>
  10. </template>
  11. <script>
  12. /**
  13. * Tr 表格行组件
  14. * @description 表格行组件 仅包含 th,td 组件
  15. * @tutorial https://ext.dcloud.net.cn/plugin?id=
  16. */
  17. export default {
  18. name: 'uniTr',
  19. props: {
  20. selectable: {
  21. type: Boolean,
  22. default: true
  23. }
  24. },
  25. options: {
  26. virtualHost: true
  27. },
  28. data() {
  29. return {
  30. value: false,
  31. border: false,
  32. selection:false,
  33. widthThArr:[]
  34. };
  35. },
  36. created() {
  37. this.root = this.getTable()
  38. this.border = this.root.border
  39. this.selection = this.root.type
  40. this.root.trChildren.push(this)
  41. this.root.isNodata()
  42. },
  43. mounted() {
  44. if(this.widthThArr.length > 0){
  45. const selectionWidth = this.selection === 'selection'? 50:0
  46. this.root.minWidth = this.widthThArr.reduce((a,b)=> Number(a) + Number(b)) + selectionWidth
  47. }
  48. },
  49. destroyed() {
  50. const index = this.root.trChildren.findIndex(i=>i===this)
  51. this.root.trChildren.splice(index,1)
  52. this.root.isNodata()
  53. },
  54. methods: {
  55. minWidthUpdate(width){
  56. this.widthThArr.push(width)
  57. },
  58. change(e) {
  59. this.root.trChildren.forEach((item) => {
  60. if (item === this) {
  61. this.root.check(this,e.detail.value.length > 0 ? true : false)
  62. }
  63. })
  64. },
  65. /**
  66. * 获取父元素实例
  67. */
  68. getTable() {
  69. let parent = this.$parent;
  70. let parentName = parent.$options.name;
  71. while (parentName !== 'uniTable') {
  72. parent = parent.$parent;
  73. if (!parent) return false;
  74. parentName = parent.$options.name;
  75. }
  76. return parent;
  77. },
  78. }
  79. }
  80. </script>
  81. <style lang="scss">
  82. .uni-table-tr {
  83. /* #ifndef APP-NVUE */
  84. display: table-row;
  85. transition: all .3s;
  86. box-sizing: border-box;
  87. /* #endif */
  88. }
  89. .checkbox {
  90. padding: 12px 8px;
  91. width: 26px;
  92. padding-left: 12px;
  93. /* #ifndef APP-NVUE */
  94. display: table-cell;
  95. vertical-align: middle;
  96. /* #endif */
  97. color: #333;
  98. font-weight: 500;
  99. border-bottom: 1px #ddd solid;
  100. font-size: 14px;
  101. // text-align: center;
  102. }
  103. .tr-table--border {
  104. border-right: 1px #ddd solid;
  105. }
  106. /* #ifndef APP-NVUE */
  107. .uni-table-tr {
  108. ::v-deep .uni-table-th {
  109. &.table--border:last-child {
  110. border-right: none;
  111. }
  112. }
  113. ::v-deep .uni-table-td {
  114. &.table--border:last-child {
  115. border-right: none;
  116. }
  117. }
  118. }
  119. /* #endif */
  120. </style>