element-ui table自定义表头的两种方式

ppylox
·8/24/2021·10 阅读

两种方式:

1.采用render-header方法,在el-table-column 添加render-header属性,功能就表头为责任人的添加一个问好,鼠标hover显示一个提示。这种方给表头添加样式比较麻烦,里面的代码要自行组装。

 

<el-table-column

            prop="dutyName"

            label="责任人"

           \n:render-header="headercellclassname"

          >

 

 methods: {

headercellclassname(h, { column, $index }) {

     \n// 自定义表格label样式

     \nif (column.label !== "责任人") {

        return;

      }

      return\nh("div", [

       \nh("span", column.label),

        h(

         \n"el-popover",

          {

            props: {

             \ncontent: "最多显示5位责任人,如有更多责任人,请进入项目详情查看",

             \nplacement: "top",

              trigger:\n"hover",

            },

          },

          [

           \nh("span", {

              class:\n"el-icon-warning",

              style:\n"color:#c7c9d4",

              slot:\n"reference",

            }),

          ]

        ),

      ]);

    },

}

 

2.使用表格自带slot属性。通过在template标签上添加slot="name" 实现自定义表头,也就是在同一个table-column下面可以同时存在原本显示每行内容的template和自定义表头的template。

 

<el-table-column>

        <template slot="header">

             \n<span>责任人</span>

             \n<el-popover

               \nplacement="top"

               \ntrigger="hover"

                content="最多显示5位责任人,如有更多责任人,请进入项目详情查看">

                <i\nclass="el-icon-warning" slot="reference"\nstyle="color:#c7c9d4"></i>

             \n</el-popover>

         </template>

         <template\nslot-scope="scope">

                <span>这里是每行显示的内容</span>

        </template >

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

</el-table-column>


效果如下:

评论 (0)

暂无评论,来写第一条吧