526互联

vue3 elementplus 表格表头过长 三个点显示

发布时间 2023-12-26 17:54:41作者: xxzhang1437
vue3:
const renderHeaderMethods = ({ column }) => {
    return createVNode(
        resolveComponent('el-tooltip'),
        {
            effect: 'dark',
            content: column.label,
            placement: 'top'
        },
        {
            default: createVNode(
                'span',
                {
                    class: 'fa fa-exclamation-circle icon my-tooltip'
                },
                column.label.length > 7 ? column.label.substr(0, 7) + '...' : column.label
            )
        }
    );
};
         <el-table-column
                    label="透平发电机组IGV维保测试/3个月"
                    prop="alternatoIgvMaintain"
                    header-align="center"
                    align="center"
                    width="150px"
                    :show-overflow-tooltip="true"
                    :render-header="renderHeaderMethods"
                />
vue2:
renderHeader(h, data) {
      return h("span", [
        h(
          "el-tooltip",
          {
            attrs: {
              class: "item",
              effect: "dark",
              content: data.column.label,
              placement: "top",
            },
          },
          [h("span", data.column.label)]
        ),
      ]);
    },