前提: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:[],//表格选中行
},
}