新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

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

@@ -1,171 +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>
<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>