1. Requirements: Check an item, the table will display the corresponding data, otherwise it will not display
2. Dynamic assignment of the columns of the table (all are not displayed by default at the beginning)
html:
<div class="checkBox">
<a-checkbox @change="changeData" :checked="dataRate">
数据传输完整率
</a-checkbox>
<a-checkbox @change="changeTimely" :checked="timelyRate">
及时率
</a-checkbox>
<a-checkbox @change="changeMutation" :checked="mutationRate">
突变率
</a-checkbox>
<a-checkbox @change="changeFault" :checked="faultRate">
故障率
</a-checkbox>
<a-checkbox @change="changeAlarm" :checked="alarmRate">
告警率
</a-checkbox>
</div>
<div class="groupManage-table">
<a-table
:columns="columns"
:data-source="tableData"
rowKey="deviceId"
:loading="dataLoad"
:pagination="pagination"
@change="changePages"
>
<template slot="ownerUnit" slot-scope="text">
<span v-if="text == '1'">本项目</span>
<span v-if="text == '2'">区水务局</span>
<span v-if="text == '3'">排水公司</span>
<span v-if="text == '4'">其他</span>
<span v-if="text == '5'">全部</span>
<span v-if="text == ''">--</span>
</template>
<template slot="dataCompleteRate" slot-scope="text">
<span>{
{ text }}%</span>
</template>
<template slot="timelinessRate" slot-scope="text">
<span>{
{ text }}%</span>
</template>
<template slot="mutationRate" slot-scope="text">
<span>{
{ text }}%</span>
</template>
<template slot="failureRate" slot-scope="text">
<span>{
{ text }}%</span>
</template>
<template slot="alarmRate" slot-scope="text">
<span>{
{ text }}%</span>
</template>
<template slot="action" slot-scope="record">
<a href="javascript:void(0);" @click="handleDetail(record)"
>查看</a
>
</template>
<template slot="expandedRowRender" slot-scope="record">
<row-detail :record="record" />
</template>
</a-table>
</div>
js：
data() {
return {
dataRate: false,
timelyRate: false,
mutationRate: false,
faultRate: false,
alarmRate: false,
};
},
created() {
this.columns = [
{
title: "设备类型",
dataIndex: "deviceTypeName",
ellipsis: true,
},
{
title: "设备编码",
dataIndex: "deviceCode",
width: 140,
},
{
title: "运维单位",
dataIndex: "ownerUnit",
scopedSlots: { customRender: "ownerUnit" },
ellipsis: true,
},
{
title: "操作",
width: 70,
scopedSlots: { customRender: "action" },
},
];
},
watch: {
// 动态改变表头
dataRate: function (val) {
if (val) {
// 为true添加到表格
this.columns.splice(this.columns.length - 1, 0, {
title: "数据传输完整率",
dataIndex: "dataCompleteRate",
scopedSlots: { customRender: "dataCompleteRate" },
width: 120,
});
} else {
// 为false不显示在表格
this.noRepeat(this.columns, {
title: "数据传输完整率",
dataIndex: "dataCompleteRate",
scopedSlots: { customRender: "dataCompleteRate" },
width: 120,
});
}
},
timelyRate: function (val) {
if (val) {
this.columns.splice(this.columns.length - 1, 0, {
title: "及时率",
dataIndex: "timelinessRate",
scopedSlots: { customRender: "timelinessRate" },
width: 90,
});
} else {
this.noRepeat(this.columns, {
title: "及时率",
dataIndex: "timelinessRate",
scopedSlots: { customRender: "timelinessRate" },
width: 90,
});
}
},
mutationRate: function (val) {
if (val) {
this.columns.splice(this.columns.length - 1, 0, {
title: "突变率",
dataIndex: "mutationRate",
scopedSlots: { customRender: "mutationRate" },
width: 90,
});
} else {
this.noRepeat(this.columns, {
title: "突变率",
dataIndex: "mutationRate",
scopedSlots: { customRender: "mutationRate" },
width: 90,
});
}
},
faultRate: function (val) {
if (val) {
this.columns.splice(this.columns.length - 1, 0, {
title: "故障率",
dataIndex: "failureRate",
scopedSlots: { customRender: "failureRate" },
width: 90,
});
} else {
this.noRepeat(this.columns, {
title: "故障率",
dataIndex: "failureRate",
scopedSlots: { customRender: "failureRate" },
width: 90,
});
}
},
alarmRate: function (val) {
if (val) {
this.columns.splice(this.columns.length - 1, 0, {
title: "告警率",
dataIndex: "alarmRate",
scopedSlots: { customRender: "alarmRate" },
width: 90,
});
} else {
this.noRepeat(this.columns, {
title: "告警率",
dataIndex: "alarmRate",
scopedSlots: { customRender: "alarmRate" },
width: 90,
});
}
},
},
3. Two methods need to be used, one is to judge that the objects are equal; the other is to delete an item of the array without subscripting (the item of the array is an object)
// 判断两个对象是否相等
compareJsonObj(obj1, obj2) {
let result = true;
if (!isJsonObj(obj1) || !isJsonObj(obj2)) return false;
for (let key in obj1) {
if (
(obj1[key] && !obj2[key]) ||
(!obj1[key] && obj2[key]) ||
(obj1[key] &&
obj2[key] &&
obj1[key].toString() !== obj2[key].toString())
) {
result = false;
break;
}
}
return result;
// 判断一个对象是否是 json 对象
function isJsonObj(data) {
return (
data && Object.prototype.toString.call(data) === "[object Object]"
);
}
},
// 不通过下标删除数组中的项（项为对象）
noRepeat(arr1, item) {
arr1.filter((its, index) => {
if (this.compareJsonObj(its, item)) {
arr1.splice(index, 1);
}
});
return arr1;
},
4. The code is a bit more, but the requirements are completed
