elementUI 自定义列名 Vue2.6 render-header

2022-10-20 202 阅读1分钟

el-table-column的自定义表头在刚发文档中使用的是

<template slot="header" slot-scope="scope"> 
    <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
</template>

上面的方法在需要一个条件的判断的展示情况下不是很灵活

ElementUI提供了render-header属性

Function(h, { column, $index })

参数column 包含属性：'order', 'id', 'type', 'property', 'align', 'headerAlign', 'showOverflowTooltip', 'filterable', 'filteredValue', 'filterPlacement', 'isColumnGroup', 'filterOpened', 'sortable', 'index', 'label', 'renderHeader', 'formatter', 'fixed', 'resizable', 'sortOrders', 'reserveSelection', 'filterMultiple', 'width', 'minWidth', 'realWidth', 'renderCell', 'level', 'colSpan', 'rowSpan'

<el-table-column :render-header="renderHeader">
    <template />
</el-table-column>

可以使用jsx写法，方便做一些条件判断和使用复杂的组件

renderHeader(h, { column }) {
      if (column.property === 'AccessData' || column.property === 'UpdateData') {
        return <el-tooltip effect='light'>
          <div slot='content'>
            text <br />
            text
          </div>
          <div>{column.label}<i class='el-icon-question' /></div>
        </el-tooltip>;
      }
      return column.label;
    },