Primeng中一些组件的格式调整以及css设置

个人觉得primeng提供了很多比较好看的组件，包括输入框input、表格table、按钮button、交互框dialog等等，样式要比angular material好看一些，也比较好上手，官网提供了很多示例代码以及参数的使用说明。

但是某些组件的元素样式说明可能没有很直接，所以想开这篇文章，介绍一下我在使用其中一些组件时遇到的问题，以及对应的解决方案，包括一些内部元素的css设置。

multiselect / multi-select

options绑定的变量发生变化

虽然官网文档中options中可以传入selectedItem类变量，也可以传入自定义的类变量，但是只有使用selectedItem时才能检测到变量在其他地方的更新。

选择项获取: 判断选中项的变化

可以通过ngModel进行双向绑定，也可以通过$event.value获得当前被选择的item list。

如何判断何时选中项发生了变化以及变化了什么： onChange能够检测变化，只要选中项发生变化就会触发onChange。这样绑定一个操作(onChange)=”changeOperation($event)”就可以在有变化时进行函数调用，$event.value获得当前所有被选择的item_list，\$event.itemValue可以获得当前操作 (选中或者取消选中) 的item，通过item_list.includes(item)就可以判断当前操作到底是选中操作还是取消操作。

数据item list样式设置

例如：原本默认下拉框中展示的是string字符串，options中提供所有可选列表，那如果我们想根据options中的数据重新设计一些样式，例如调整颜色等，可以使用ng-template指定pTemplate=”item”，即可对每个option进行样式设计，如：

<p-multiSelect defaultLabel="Tags" [dropdownIcon]="dropDownIcon" class="multiselect" [options]="items" [(ngModel)]="selectedItems" name="selectedItems" maxSelectedLabels=0 [panelStyle]="{minWidth:'12em'}" scrollHeight="100px">
      <ng-template let-item  pTemplate="item">
        <span style="color:#e78d75">
          {{item.label}}
        </span>
      </ng-template>
</p-multiSelect>

上面的代码中还有一些比较有用的参数：

defaultLabel: 没有任何item选中时多选框中显示的文字
dropdownIcon: 下拉按钮的icon显示，可以自己使用string变量定义，例如使用fontawesome中的图片
maxSelectedLabels: 数值设置，当选中的item个数大于这个值时，多选框中就显示”x items selected”，小于等于这个值时会将选中的item label展示在多选框中。如果想要一有item被选中就开始显示”1 items selected”，这个数值应该设置为0
scrollHeight：用于设置下拉框高度大于多少时开始使用scroll bar，如果不设置则默认一直展示全量的列表

局部css设置

设置下拉框面板背景色为白色而不是透明

.ui-multiselect-panel .ui-multiselect-items-wrapper{
  background: white !important;
}

设置多选框宽度、高度、和其他组件齐平、边框

.ui-multiselect {
  width: 120px !important;
  height: 22px !important;
  display: inline-flex !important;
  background: white !important;
  border: ridge 1px lightgray !important;
}

设置多选框背景为白色，而不是透明色

.ui-multiselect ui-state-default{
  background: white !important;
}

设置下拉按钮的背景色：默认为透明色，如果想要和显示框一样为白色，可以设置为

.ui-multiselect-trigger{
  background: white !important;
}

accordion

点击某个tab时触发数据请求

<p-accordion (onOpen)="getDataByIndex($event.index)">
</p-accordion>

使用onOpen可以触发这个事件来调用对应的函数，函数中可以传入参数$event.index，通过参数可以知晓这是折叠项中的第几个。

设置折叠栏上的显示

简单情况下，通过

<p-accordion header={{headerName}}>
</p-accordion>

可以将某个string变量设置为折叠栏的头部显示，但有时候我们需要添加更多的信息，有可能不只是字符串那么简单，这时我们可以使用p-header进行操作

<p-accordionTab *ngFor="let businessRuleName of businessRuleGroup.bsnsNameList">
   <p-header>
        <!--you can add anything if you want-->
        {{headerName}}
        <button....></button>
   </p-header>
</p-accordionTab>

可变的折叠栏数目

最简单的accordion使用方法为

<p-accordion>
    <p-accordionTab header="Header 1">
       Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3    
    </p-accordionTab>
</p-accordion>

但是很多时候我们需要动态控制其中的内容，这时我们就要使用ngFor的功能

<p-accordion>
    <p-accordionTab *ngFor="let item of items" header={{item.header}}>
       item.content
    </p-accordionTab>
</p-accordion>

notice: 注意这里的for循环需要放在p-accordionTab层级，而不是p-accordion层级。这是我犯的一个错误，这就造成点开一个折叠项时本来展开的折叠项不会自动收缩。原因就是，把for循环放在p-accordion会造成其实开了很多个accordion项，而每个项中只有一个折叠项，也就是说每个项之间相互独立。

turbo table / p-table

获取操作对应的行号

let-rowIndex="rowIndex"

input

将输入框改为圆角

border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;