js:
1.整理数据的方法:
// 整理數據
clean_data(val, val2) {
this.poptop_data = [];
let df = [];
df.push("加載中...");
this.popData.push(df);
let k = this;
this.detail_position_download(val, val2, function(arr) {
setTimeout(function() {
k.popData.splice(0);
for (let i = 0; i < arr.length; i++) {
k.popData.push(arr[i]);
}
}, 250);
});
},2.加载数据
// 具體崗位信息
detail_position_download(line, type, callback) {
$.ajax({
type: "GET",
dataType: "JSON",
url:
APP.URL.getUrl("empManage.detail") +
line +
"/" +
type +
APP.URL.test1,
success: function(json) {
if (json.rv == 200) {
var data = json.data;
var arr = [];
let arr0 = [];
arr0[0] = {value:"崗位"};
let arr1 = [];
arr1[0] = {value:"計劃"};
let arr2 = [];
arr2[0] = {value:"實際"};
let arr3 = [];
arr3[0] = {value:"標配"};
let arr4 = [];
let arr5 = [];
// 加上颜色判断
for (let i = 1; i <= data.length; i++) {
if(data[i - 1].p_ttl < data[i - 1].s_ttl){
arr4.push("#f00")
}else if(data[i - 1].p_ttl > data[i - 1].s_ttl){
arr4.push ("#00f")
}else{
arr4.push ("#000")
}
if(data[i - 1].r_ttl < data[i - 1].s_ttl){
arr5.push("#f00")
}else if(data[i - 1].r_ttl > data[i - 1].s_ttl){
arr5.push("#00f")
}else{
arr5.push("#000")
}
arr0[i] = {value:data[i - 1].post};
arr1[i] = {value:data[i - 1].p_ttl,color:arr4[i-1]};
arr2[i] = {value:data[i - 1].r_ttl,color:arr5[i-1]};
arr3[i] = {value:data[i - 1].s_ttl}
}
arr.push(arr0);
arr.push(arr3);
arr.push(arr1);
arr.push(arr2);
}
callback(arr);
}
});
},3.在render里渲染
{
title: "IDL2",
align: "center",
width: 120,
render: (h, params) => {
return h(
"poptip",
{
props: {
trigger: "hover",
placement: "right-start",
content: this.popData,
width: 300,
wordWrap: true
},
on: {
"on-popper-show": () => {
this.popData.splice(0);
this.clean_data(params.row.line_code, "IDL2");
}
}
},
[
h(
"div",
{
attrs: {
class: "idl2"
},
style: {
cursor: "pointer"
},
on: {
click: () => {
let k = this;
this.tab_model = "name5";
this.display(this.idl2);
this.tab_data(params, "idl2");
this.yy = "c5";
setTimeout(function() {
k.dynamicCreated(k.idl2);
}, 200);
}
}
},
this.setColorByData(
h,
params.row.std.idl2,
params.row.plan.idl2,
params.row.real.idl2
)
),
h(
"div",
{
slot: "content"
},
[
//表格型
h(
"table",
{
style: {
textAlign: "center",
margin: "0 auto"
}
},
this.popData.map(item => {
return h(
"td",
{
style: {
// textAlign: 'center',
padding: "10px",
background: "#fff",
border: "0px"
}
},
item.map(items => {
return h(
"tr",
{
style: {
textAlign: "center",
padding: "14px",
height: "auto",
background: "#fff",
border: "0px",
color: items.color // 取出颜色
}
},
items.value // 取出值
);
})
);
})
)
]
)
]
);
}
}
]
},运行结果:
