1

zhangc

2025-03-24 5d62f0a16c8475aff2103f476fe827ec3e16046c

 uni_modules/uni-table/components/uni-tr/uni-tr.vue

New file
@@ -0,0 +1,171 @@
<template>
   <!-- #ifdef H5 -->
   <tr class="uni-table-tr">
      <th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
         <table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
      </th>
      <slot></slot>
      <!-- <uni-th class="th-fixed">123</uni-th> -->
   </tr>
   <!-- #endif -->
   <!-- #ifndef H5 -->
   <view class="uni-table-tr">
      <view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
         <table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
      </view>
      <slot></slot>
   </view>
   <!-- #endif -->
</template>

<script>
   import tableCheckbox from './table-checkbox.vue'
/**
 * Tr 表格行组件
 * @description 表格行组件 仅包含 th,td 组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=
 */
export default {
   name: 'uniTr',
   components: { tableCheckbox },
   props: {
      disabled: {
         type: Boolean,
         default: false
      },
      keyValue: {
         type: [String, Number],
         default: ''
      }
   },
   options: {
      virtualHost: true
   },
   data() {
      return {
         value: false,
         border: false,
         selection: false,
         widthThArr: [],
         ishead: true,
         checked: false,
         indeterminate:false
      }
   },
   created() {
      this.root = this.getTable()
      this.head = this.getTable('uniThead')
      if (this.head) {
         this.ishead = false
         this.head.init(this)
      }
      this.border = this.root.border
      this.selection = this.root.type
      this.root.trChildren.push(this)
      const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
      if(rowData){
         this.rowData = rowData
      }
      this.root.isNodata()
   },
   mounted() {
      if (this.widthThArr.length > 0) {
         const selectionWidth = this.selection === 'selection' ? 50 : 0
         this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
      }
   },
   // #ifndef VUE3
   destroyed() {
      const index = this.root.trChildren.findIndex(i => i === this)
      this.root.trChildren.splice(index, 1)
      this.root.isNodata()
   },
   // #endif
   // #ifdef VUE3
   unmounted() {
      const index = this.root.trChildren.findIndex(i => i === this)
      this.root.trChildren.splice(index, 1)
      this.root.isNodata()
   },
   // #endif
   methods: {
      minWidthUpdate(width) {
         this.widthThArr.push(width)
      },
      // 选中
      checkboxSelected(e) {
         let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
         this.checked = e.checked
         this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
      },
      change(e) {
         this.root.trChildren.forEach(item => {
            if (item === this) {
               this.root.check(this, e.detail.value.length > 0 ? true : false)
            }
         })
      },
      /**
       * 获取父元素实例
       */
      getTable(name = 'uniTable') {
         let parent = this.$parent
         let parentName = parent.$options.name
         while (parentName !== name) {
            parent = parent.$parent
            if (!parent) return false
            parentName = parent.$options.name
         }
         return parent
      }
   }
}
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-tr {
   /* #ifndef APP-NVUE */
   display: table-row;
   transition: all 0.3s;
   box-sizing: border-box;
   /* #endif */
}

.checkbox {
   padding: 0 8px;
   width: 26px;
   padding-left: 12px;
   /* #ifndef APP-NVUE */
   display: table-cell;
   vertical-align: middle;
   /* #endif */
   color: #333;
   font-weight: 500;
   border-bottom: 1px $border-color solid;
   font-size: 14px;
   // text-align: center;
}

.tr-table--border {
   border-right: 1px $border-color solid;
}

/* #ifndef APP-NVUE */
.uni-table-tr {
   ::v-deep .uni-table-th {
      &.table--border:last-child {
         // border-right: none;
      }
   }

   ::v-deep .uni-table-td {
      &.table--border:last-child {
         // border-right: none;
      }
   }
}

/* #endif */
</style>