TreeTable

TreeTable作用域插槽写法,直接写template循环会直接报错，用下面写法即可插入作用域插槽，v-else可以不写，其余内容会默认展示

js 复制代码

  <Column v-for="col in columnConfig"
                :field="col.field"
                :key="col.field"
                :expander="col.expander">
          <template v-if="col.field === 'name'"
                    #body="slotProps">
            <div>
                {{slotProps.node}}
            </div>
          </template>
    </Column>

对齐方式
文档中使用的对齐方式是在配置中添加style属性直接映射到行内样式，这样在TreeTable和DataTable中由于th和tr外层display不同会导致无法设置对齐，所以我们采用普通表格在标签上配置tableClass的方式，树形表格采用直接通过tableProps传递class到table元素本身，然后自己添加样式，对齐TreeTable和DataTable，其实99.99%的表格我们只需要添加一个居中样式即可

js 复制代码

// 列配置
{
    "tableColumn": [
      {
        "field": "name",
        "header": "指标名称",
        "sortable": true,
        "style": { "min-width": "10rem" },
        "class": "align-center"  //添加对齐样式
      },
    ]
}
// useTableConfig.js 普通表格配置
export const useTableCommonConfig = (mode = 'multiple') => {
  const staticConf = {
    paginator: true,
    stripedRows: true,
    resizableColumns: true,
    scrollable: true,
    columnResizeMode: 'expand',
    scrollHeight: 'flex',
    tableClass: 'control-table', //配置自定义一个css局部类
  }
  return mode === 'multiple'
    ? {
        sortMode: 'multiple',
        metaKeySelection: true,
        ...staticConf,
      }
    : {
        sortMode: 'single',
        metaKeySelection: false,
      }
}
// useTreeTableConfig.js 树形表格配置
export const treeTableProps = () => {
  return {
    resizableColumns: true,
    columnResizeMode: 'expand',
    scrollable: true,
    scrollHeight: 'flex',
    rowHover: true,
    tableProps: {
      class: 'control-table', //tableProps可以直接将任何属性直接传到table元素上
    },
  }
}
// enhanceFrameWork.scss 框架额外样式
.control-table {
  .p-datatable-thead,
  .p-treetable-thead {
    .align-center {
      justify-content: center;

      .p-column-header-content {
        justify-content: center;
      }
    }
  }
.p-datatable-tbody,
 .p-treetable-tbody {
   .align-center {
     text-align: center;
     justify-content: center;
   }
  }
}

固定宽度调整
由于TreeTable使用的是flex布局，所以调整默认固定宽度在列配置中使用flex布局调整模式，对于DataTable直接使用类似style:{ 'min-width':'15rem'}类似块级样式即可

json 复制代码

// tableColumnConfig.js
...
 {
        "header": "权重",
        "field": "importance",
        "columnKey": "importance",
        "style": {
          "flex": "0 0 15rem" //添加样式
        },
        "class":"align-center" //居中对齐，配置见上文
      }

InputNumber

InputNumber设置小数，最大/最小位数

js 复制代码

 <InputNumber v-model="currentValue"
                     mode="decimal"
                     :minFractionDigits="2"
                     :maxFractionDigits="5"></InputNumber>

CustomIcon

PrimeVue框架附带了一个图标库PrimeIcon，但是对于自定义高的项目是远远不够的，如果想使用自定义图标，从iconfont上面找也是可以，但是存在风格不统一，样式不统一的缺点，使用iconify是个不错的选择，但是找图标实在是费劲，这里我建议使用material Design Icon，官网在这里，使用同步的第三方维护的svg图标库，他和主库是同步的，这样可以单独引入图标，因为material Design实在太大，有4M，查找和单独引入相对都比较方便，这里还有基于vite组件化引入图标的插件，体验不错，步骤如下

安装mdicon图标库

css 复制代码

npm install @material-design-icons/svg@latest

配置 vitesvg组件化加载插件

css 复制代码

npm install vite-svg-loader --save-dev

//vite.config.js
...js
import svgLoader from 'vite-svg-loader'
...
plugins:[
    vue(),
    svgLoader({
    //特别注意这里关掉svgo，否则会出现加载的svg图标丢失 viewBox属性，造成无法通过rem控制大小
    svgo:false 
})
]

使用

js 复制代码

//buttonIcon.vue
//引入icon
import Face from '@material-design-icons/svg/outlined/face.svg'
<template>
    <Button label="自定义图标按钮">
    <-- primevue中 按钮自定义图标-->
            <template #icon>
              <Face class="svg-icon" />
            </template>
         
    </Button>
</template>

//global.scss
//配置全局svg图标类
...
.svg-icon{
   height:1rem;
   width:1rem;
   fill:currentColor;
}

PrimeVue使用技巧(一)

TreeTable

InputNumber

CustomIcon