qingyiay
2023-03-28 e7b0b34176549cfec809c6b89c4cab0999e488b9
uni_modules/uni-table/components/uni-td/uni-td.vue
@@ -1,90 +1,90 @@
<template>
   <!-- #ifdef H5 -->
   <td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
   <td class="uni-table-td" @click="getRow" :rowspan="rowspan" :colspan="colspan" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
      <slot></slot>
   </td>
   <!-- #endif -->
   <!-- #ifndef H5 -->
   <!-- :class="{'table--border':border}"  -->
   <view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
      <slot></slot>
   </view>
   <view class="uni-table-td" @click="getRow" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
   <!-- #endif -->
</template>
<script>
   /**
    * Td 单元格
    * @description 表格中的标准单元格组件
    * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
    * @property {Number}    align = [left|center|right]   单元格对齐方式
    */
   export default {
      name: 'uniTd',
      options: {
         virtualHost: true
/**
 * Td 单元格
 * @description 表格中的标准单元格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Number}    align = [left|center|right]   单元格对齐方式
 */
export default {
   name: 'uniTd',
   options: {
      virtualHost: true
   },
   props: {
      width: {
         type: [String, Number],
         default: ''
      },
      props: {
         width: {
            type: [String, Number],
            default: ''
         },
         align: {
            type: String,
            default: 'left'
         },
         rowspan: {
            type: [Number,String],
            default: 1
         },
         colspan: {
               type: [Number,String],
            default: 1
      align: {
         type: String,
         default: 'left'
      },
      rowspan: {
         type: [Number, String],
         default: 1
      },
      colspan: {
         type: [Number, String],
         default: 1
      }
   },
   data() {
      return {
         border: false
      };
   },
   created() {
      this.root = this.getTable();
      this.border = this.root.border;
   },
   methods: {
      getRow() {
         this.$emit('row-click');
      },
      /**
       * 获取父元素实例
       */
      getTable() {
         let parent = this.$parent;
         let parentName = parent.$options.name;
         while (parentName !== 'uniTable') {
            parent = parent.$parent;
            if (!parent) return false;
            parentName = parent.$options.name;
         }
      },
      data() {
         return {
            border: false
         };
      },
      created() {
         this.root = this.getTable()
         this.border = this.root.border
      },
      methods: {
         /**
          * 获取父元素实例
          */
         getTable() {
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== 'uniTable') {
               parent = parent.$parent;
               if (!parent) return false;
               parentName = parent.$options.name;
            }
            return parent;
         },
         return parent;
      }
   }
};
</script>
<style lang="scss">
   $border-color:#EBEEF5;
$border-color: #ebeef5;
   .uni-table-td {
      display: table-cell;
      padding: 8px 10px;
      font-size: 14px;
      border-bottom: 1px $border-color solid;
      font-weight: 400;
      color: #606266;
      line-height: 23px;
      box-sizing: border-box;
   }
.uni-table-td {
   display: table-cell;
   padding: 8px 10px;
   font-size: 14px;
   border-bottom: 1px $border-color solid;
   font-weight: 400;
   color: #606266;
   line-height: 23px;
   box-sizing: border-box;
}
   .table--border {
      border-right: 1px $border-color solid;
   }
.table--border {
   border-right: 1px $border-color solid;
}
</style>