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>
{{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;