HAML:表中的列不再出现

时间:2018-09-13 13:18:40

标签: css angularjs haml

我正在使用haml作为视图语法来进行angularJS和rails项目,我有一个包含一些数据的表,如果数据很大2列: Prestation Tps 不能正确显示屏幕截图描述: enter image description here

enter image description here

此处是查看代码:

.directive-specifications-table
  .row.specifications-export
    %a.btn.btn-green.pull-right{ ng: { href: "/specifications/{{ contractPeriod.id }}/export?format=xls", if: "displayOptions.displayMode != 'schedules' && contractPeriod.hasSpecifications()" }}
      %i.fa.fa-cloud-download
      {{ 'btn.export_to_xls' | translate }}
  .row
    %table.table.table-condensed.table-striped{ ng: { if: "contractPeriod.hasSpecifications()", class: "{'table-hover': displayOptions.selectionMode }" }}
      %thead
        %tr
          %th.button-select{ ng_if: "displayOptions.selectionMode === 'multi'" }
            %multi_checker{ ng_if: "specificationTemplates", items: "specificationTemplates", selected: "selectedSpecificationTpl" }


          %th.small{ ng_if: "displayOptions.showIconOpenModalSpecification" }
          / ---
          %th.medium{ ng_if: "displayOptions.displayMode === 'schedules'"}
            %span{ ng_if: 'optionalFields.showQuantityModel', translate: 'specifications_table.shortened.quantity_model' }
            %span{ ng_if: 'optionalFields.showQuantityModel' }
              \/
            %span{ translate: 'specifications_table.shortened.quantity' }
          %th.large{  translate: 'specifications_table.specification_template'       }
          %th.medium{ translate: 'specifications_table.shortened.unit_time', ng_if: "displayOptions.displayMode === 'schedules'" }
          %th.medium{ translate: 'specifications_table.shortened.technicians_count', ng_if: "displayOptions.displayMode === 'schedules'" }
          %th.medium{ translate: 'specifications_table.shortened.specification_time' }
          / ---
          %th.small{ ng_repeat: "month in monthsInContractDateRange track by $index" }
            {{ month.shortname[0] | uppercase }}
          / ---
          %th.medium{ ng_if: 'displayOptions.showTotalDuration', translate: 'specifications_table.shortened.total_time' }
          %th.medium{ ng_if: "displayOptions.displayMode === 'balance'",
                      translate: 'specifications_table.shortened.balance' }

          %th.medium{ ng_if: "displayOptions.displayMode === 'follow-up'",
                      translate: 'specifications_table.shortened.total' }

          %th.medium{ ng_if: "displayOptions.displayMode != 'schedules'",
                      translate: 'specifications_table.shortened.remaining_duration' }

      %tbody
        %tr.specification-row{ ng: { repeat: "specificationTpl in specificationTemplates track by specificationTpl.id",
                                      class: "{ 'selected': selectedSpecificationTpl[ specificationTpl.id ] }",
                                      click: "selectSpecification( specificationTpl.object) "}}

          %td{ ng_if: "displayOptions.selectionMode === 'multi'" }
            %input{ type: 'checkbox', ng: { checked: "selectedSpecificationTpl[ specificationTpl.id ]" }}

          %td.pointer{ ng: { click: "showSpecification( $event, specificationTpl.object )", if: "displayOptions.showIconOpenModalSpecification" } }
            %i.fa.fa-eye

          / ---

          %td{ ng: { if: "displayOptions.displayMode === 'schedules'", class: '{ danger: optionalFields.showQuantityModel && specificationTpl.object.getQuantityModel() < specificationTpl.object.getQuantity(),
                               success: optionalFields.showQuantityModel && specificationTpl.object.getQuantityModel() === specificationTpl.object.getQuantity() }' }}
            %span{ ng_if: 'optionalFields.showQuantityModel' }
              {{ ( specificationTpl.object.getQuantityModel() | removeZero: '-' ) + " / " }}
            {{ specificationTpl.object.getQuantity() | removeZero: '-' }}
          %td
            .specification-name{ popover: "{{ specificationTpl.name }}", popover_trigger:  "mouseenter",
                                                                         popover_popup_delay: 1000,
                                                                         popover_animation: true,
                                                                         popover_placement: "top" }
              {{ specificationTpl.name }}
          %td{ ng_if: "displayOptions.displayMode === 'schedules'" }
            {{ specificationTpl.unitDuration || '-' }}

          %td{ ng_if: "displayOptions.displayMode === 'schedules'" }
            {{ specificationTpl.techniciansCount | removeZero: '-' }}

          %td.separator
            {{ specificationTpl.duration || '-' }}

          / ---
          %td{ ng: { repeat: 'value in specificationTpl.monthValues track by $index',
                     class: "{ separator: $last }" }}
            %specifications_table_month_value{ display_mode: 'displayOptions.displayMode',
                                               value: 'value',
                                               executed: 'value.executed.count',
                                               scheduled: 'value.scheduled.count' }
          / ---

          %td{ ng_if: 'displayOptions.showTotalDuration' }
            {{ specificationTpl.totalDuration || '-' }}

          %td{ ng_if: "displayOptions.displayMode != 'schedules'" }
            %specifications_table_month_total_value{ display_mode: 'displayOptions.displayMode', specification_tpl: 'specificationTpl' }

          %td{ng_if: "displayOptions.displayMode != 'schedules'" }
            {{ specificationTpl.remainingDuration }}

        %tr.summary{ ng_if: "displayOptions.showSummary" }
          %td.separator{ colspan: '{{ displayOptions.summaryColspan }}' , translate: 'specifications_table.planned_interventions' }
          %td{ ng_repeat: "interventionsCount in interventionsSummary() track by $index" }
            {{ interventionsCount | removeZero }}

我想为列设置固定宽度:tps,水平升降机可以查询整个表格。

0 个答案:

没有答案