Tui基础组件文档库

# 自定义列标题 label

属性columns需配置

renderHeader：列标题 Label 区域渲染使用的 Function(row) 可以用 jsx 方式

# JSX 方式如下：

renderHeader: (row) => {
                return (
                  <div>
                    <span>{row.label}</span>
                    <i class="el-icon-question"></i>
                  </div>
                )
              },

<template>
  <div class="t-table" style="width:100%;">
    <t-table :table="table" :columns="columns" />
  </div>
</template>

<script>
export default {
  name: 'renderHeader',
  data() {
    return {
      table: {
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            address: '广东省广州市天河区3'
          }
        ]
      },
      columns: [
        {
          prop: 'name', label: '姓名', minWidth: '100',
          renderHeader: (row) => {
            return (
              <div>
                <span>姓名</span>
                <i class="el-icon-question" />
              </div>
            )
          }
        },
        { prop: 'date', label: '必选项', headerRequired: true, minWidth: '180' },
        {
          prop: 'address', label: '地址', minWidth: '220',
          renderHeader: (row) => {
            return (
              <div>
                <span>{row.label}</span>
                <el-tooltip class="tooltip" effect="dark" placement="right">
                  <ul slot="content">
                    <li>这是第一个提示</li>
                    <li>这是第二个提示</li>
                  </ul>
                  <i class="el-icon-question" />
                </el-tooltip>
              </div>
            )
          }
        },
        { prop: 'date', label: '日期', minWidth: '180' }
      ]
    }
  }
}
</script>
显示代码

← TTableTree 组件 →