element table 自定义表头和提示框弹框 方法!

element table 自定义表头和提示框弹框 方法!

效果图:element table 自定义表头和提示框弹框 方法!_第1张图片

<el-table-column sortable
                 width="120"
                 value="dasdadsadadas"
                 icon="el-icon-question"
                 :render-header="(h, { column, $index }) => renderHeader(h, { column, $index },'12131')"
                 label="名称">
  <template slot-scope="scope">
    <p>{
     {
     scope.row.xxx}}</p>
  </template>
</el-table-column>
renderHeader (h, {
      column, $index }, obj) {
     
      console.log(h, {
      column, $index }, obj);
      return h("span", [
        h("span", column.label + "  ", {
     
          align: "left",
          }),
        h(
          "el-popover",
          {
     
            props: {
     
              placement: "top",    
              // width: "200",
              trigger: "hover"
            }
          },
          [
            h("span", obj, {
     
              class: "text-align: right; margin: 0"
            }),
            h("i", {
                                 
              class: "el-icon-question",

              // style: "color:red,margin:18px",
              slot: "reference"
            })
          ]
        )
      ]);
    },

你可能感兴趣的:(vue,element,vue.js,elementui)