vue，table表头自定义

添加节点展示icon

<!-- showRenJunGouKaDanJiaTips函数为添加节点函数，  clicktable为点击单元格获取函数接收两个参数row, event -->

    <el-table :data="tableData" border style="width: 100%" @sort-change="totalusercount" @header-click="clicktable">
        <el-table-column label="亲友圈名称/ID" flxed :render-header="showRenJunGouKaDanJiaTips" width="90">
          <template slot-scope="scope">
            <div>{{scope.row.name}}</div>
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
    </el-table>    
复制代码

showRenJunGouKaDanJiaTips(createElement, { column, index }) {
    console.log(column, index, 'indexindexindex')
    return 
    // 添加第一个span节点class为renderTableHead
    createElement(
      'span',
      {
        class: 'renderTableHead',
      },
      [
      // 把节点添加为table的头部信息单元格中
        createElement('span', [`${column.label}`]),
        createElement(
          'el-tooltip',
          {
            attrs: {
              content: '收起右侧不常用数据或者展开这些数据',
              placement: 'top'
            },
          },
          // 添加span节点 定义class为el-icon-caret-left tableHeaderIcon1
          [
            createElement('span', [
              createElement('span', {
                attrs: { class: 'el-icon-caret-left tableHeaderIcon1' },
              }),
            ]),
          ],
        ),
      ],
    )
  },
复制代码

转载于:https://juejin.im/post/5b5929916fb9a04fa671b0d2