欢迎使用CSDN-markdown编辑器

用angular做后台管理系统遇到的小问题

1:css的样式问题

A: table表格中一列单元格的内容太多，导致个别列文本被挤到下一行
原因：table中各列的宽度取决于内容的宽度，某列内容过多导致各列宽度分布不合理
解决方案：自定义个别列的宽度 给这列单元格设置一个百分比宽度

.orderList {
      margin-top: 15px;
      width: 99%;
      thead{           
            th:nth-child(6){
          width:20%;
        }          
    }
 } 

B:table的单元格文本不垂直居中

原因：没设置单元格的样式
解决方案：vertical-align:middle;
代码：

   td{
       vertical-align:middle;
   }

C: 用了日期的插件，同时又设置上一级目录button按钮的宽度，导致日期插件显示特别大

原因：所用的日期插件中button继承了设置的宽度
解决方案： 把需要更改宽度的button按钮重命名

 .btn-width{
    width:140px;
    margin-left: 25px;
  }

D:

想做出一个订单进度条的效果，结果第四个图标不在同一条直线上

 <div class="step-item">
      <i class="fa fa-circle"></i><br>
      <a ng-show="! vm.isSendDate">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
      </a>
      <a ng-show=" vm.isSendDate">
        <div>已发货</div>
        <div>待完成</div>
        <div >{{ vm.sendDate|date:'yyyy-MM-dd HH:mm:ss'}}</div>
      </a>
    </div>

原因：用 ng-show做出的判断，div中没放置占位符

解决方案：div中没放置占位符

E：想把table的重复的内容合并

<tbody>
    <tr ng-repeat-start="order in vm.list" class="list-biaoTou">
      <td colspan="10" class="tbody-info">
        <label >
          <input type="checkbox" ng-model="vm.selectOrder" value="{{order.id}}">
           <span class="list-font">订单号：</span>
          <span ng-bind="order.sn" ></span>
        </label>
           <span class="list-font">下单时间：</span>  {{order.create_date._showTime | date:'yyyy-MM-dd HH:mm:ss'}}
           <span class="list-font"> 用户名：</span>{{order.member}}
           <span class="list-font"> 供应商：</span> {{order.storeName}}
      </td>
    </tr>

    <tr ng-repeat="orderItem in order.itemList" class="orderlistItem">
      <td ng-bind= "orderItem.name"></td>
      <td ng-bind= "orderItem.number"></td>
      <td ng-bind= "orderItem.lcCode"></td>
      <td ng-bind="orderItem.categoryName"></td>
      <td ng-bind= "orderItem.brandName"></td>
      <td ng-if="!$index>0" rowspan="{{order.itemList.length}}">
          <div ng-bind="order.name"></div>
          <div ng-bind="order.address"></div>
          <div ng-bind="order.mobile"></div>
      </td>
      <td ng-if="!$index>0" rowspan="{{order.itemList.length}}">
        <span ng-show="order.orderStatus == 0">未付款</span>
        <span ng-show="order.orderStatus == 1" >待发货</span>
        <span ng-show="order.orderStatus == 2">已发货</span>
        <span ng-show="order.orderStatus == 5">已完成</span>
        <span ng-show="order.orderStatus == 6">已取消</span>
      </td>

      <td  ng-if="!$index>0" rowspan="{{order.itemList.length}}">
        {{order.paymentAmount}}
      </td>
      <td class="order-listShow" ng-if="!$index>0" rowspan="{{order.itemList.length}}" >
        <a ui-sref="order-detail({id: order.id})" class="text">
          <button>订单详情</button>
        </a>
        <div ng-click="vm.changeStatus(order, '1')" ng-show="order.orderStatus == 0"  class="text">
          <button>付款</button>
        </div>
        <div ng-click="vm.changeStatus(order, '2')" ng-show=" order.orderStatus == 1" class="text">
            <button>出货</button>
        </div>
        <div ng-click="vm.changeStatus(order, '6')" ng-show="order.orderStatus == 0 || order.orderStatus == 1||order.orderStatus == 2" class="text">
          <button>取消</button>
        </div>
        <div ng-click="vm.changeStatus(order, '5')" ng-show="order.orderStatus == 2 " class="text">
          <button>完成</button>
        </div>
      </td>
    </tr>
    <tr ng-repeat-end></tr>
    </tbody>

原因： 没做判断，导致ng-repeat的内容遍历出来
解决方案： 做出一个判断，利用$index>0,就合并单元格