element UI 封装后的table表头（tooltip）文字提示

前提：table组件被封装了，且不想引入其他组件的情况下

截图：

实现：

 

 

 

代码：

html:

<el-table stripe :data="table.data" style="width: 100%" :height="window.screen.height*0.4"
                  highlight-current-row size="mini"  :default-sort="{prop :'userCreateDate', order: 'ascending'}">
            <el-table-column show-overflow-tooltip class="tableIndexClass" type="index" width="33"></el-table-column>

            <el-table-column show-overflow-tooltip :label="col.title" :width="col.width" v-for="col in table.col"
                             :sortable="col.field=='userCreateDate'" :prop="col.field=='userCreateDate'?'userCreateDate':null">
                <template slot-scope="scope" slot="header">
                    {{col.title}}
                    <el-tooltip v-if="col.tooltip != null && col.tooltip !='' " :content="col.tooltip" placement="top">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <div v-if="col.formatter==undefined">{{scope.row[col.field]}}</div>
                    <div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='string'">
                        {{col.formatter(scope.row[col.field],scope.row)}}
                    </div>
                    <div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='object'">
                        <el-tag :type="col.formatter(scope.row[col.field],scope.row).type" effect="plain"
                                style="width:100%" size="mini">
                            {{col.formatter(scope.row[col.field],scope.row).value}}
                        </el-tag>
                    </div>
                </template>
            </el-table-column>

        </el-table>

 js:

data: {
			activeNames:["1"],//模板固定参数
			param:{//搜索参数
				appName: "llbh",
                dateOne: "",
                dateTwo: "",
                arup: "0.5",
			},
            incomeTotal: [],
            date: [],
            appNameArr: [{key:"llbh",value:"流量宝盒"},{key:"dsql",value:"大师清理管家"},
                {key:"5gsj",value:"5g世界"}],
			table:{//表格数据
                "col":[
                    {field : "appType", title : "应用名称", width : "",
                        formatter: function (str) {
                            if (str != null && str != '' && str=="llbh") {
                                return "流量宝盒";
                            }
                            if (str != null && str != '' && str=="dsql") {
                                return "大师清理管家";
                            }
                            if (str != null && str != '' && str=="5gsj") {
                                return "5g世界";
                            }
                        }
                    },
                    {field : "userCreateDate", title : "日期", width : "",
                        formatter: function (str) {
                            if (str != null && str != '') {
                                return str.substring(0,10);
                            }
                        }
                    },
                    {field : "cost", title : "消耗", width : "70px"},
                    {field : "incomeTotal", title : "合计收入", width : "70px"},
                    {field : "profit", title : "利润", width : "70px"},
                    {field : "roi", title : "累计roi", width : "45px"},
                    {field : "dau", title : "首日dau", width : "45px"},
                    {field : "dauY", title : "昨天dau", width : "45px"},
                    {field : "dauArupVal", title : "仍需几天回本", width : "60px",
                        tooltip:"正数则为回本还需要的天数，负数则表示距回本日期已经过了几天"},
                    {field : "roiGreatThanEqualOne", title : "回本周期", width : "45px"},
                    {field : "income1", title : "第1天", width : "70px",
                        tooltip:"第一个数为收入，斜杆后的数为roi"},
                    {field : "income2", title : "第2天", width : "70px"},
                    {field : "income3", title : "第3天", width : "70px"},
                    {field : "income4", title : "第4天", width : "70px"},
                    {field : "income5", title : "第5天", width : "70px"},
                    {field : "income6", title : "第6天", width : "70px"},
                    {field : "income7", title : "第7天", width : "70px"},
                    {field : "income8", title : "第8天", width : "70px"},
                    {field : "income9", title : "第9天", width : "70px"},
                    {field : "income10", title : "第10天", width : "70px"},
                    {field : "income11", title : "第11天", width : "70px"},
                    {field : "income12", title : "第12天", width : "70px"},
                    {field : "income13", title : "第13天", width : "70px"},
                    {field : "income14", title : "第14天", width : "70px"},
                    {field : "income15", title : "第15天", width : "70px"},
                    {field : "income16", title : "第16天", width : "70px"},
                    {field : "income17", title : "第17天", width : "70px"},
                    {field : "income18", title : "第18天", width : "70px"},
                    {field : "income19", title : "第19天", width : "70px"},
                    {field : "income20", title : "第20天", width : "70px"},
                    {field : "income21", title : "第21天", width : "70px"},
                ],
                "data":[],
                selects:[],//表格选中行
            },
}