fix:filter examResult

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-10-17 10:02:24 +07:00
parent 3880953988
commit 3210bbf687
3 changed files with 82 additions and 143 deletions

View file

@ -7,7 +7,11 @@ const attrs = ref<any>(useAttrs());
const table = ref<any>(null); const table = ref<any>(null);
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
const filter = defineModel<string>("filter", { required: true }); const filter = defineModel<string>("filter", { required: false });
const examResult = defineModel<string>("examResult", {
required: false,
default: "",
});
const pagination = defineModel<Pagination>("pagination", { required: true }); const pagination = defineModel<Pagination>("pagination", { required: true });
const props = defineProps({ const props = defineProps({
@ -44,6 +48,13 @@ const props = defineProps({
}, },
}); });
const optionsStatus = ref<any[]>([
{ label: "ทั้งหมด", value: "" },
{ label: "ขส.", value: "missed_exam" },
{ label: "ผ่าน", value: "pass" },
{ label: "ไม่ผ่าน", value: "notpass" },
]);
const emit = defineEmits([ const emit = defineEmits([
"update:inputfilter", "update:inputfilter",
"update:inputvisible", "update:inputvisible",
@ -92,6 +103,7 @@ watch(
} }
); );
</script> </script>
<template> <template>
<div class="q-pb-sm row q-col-gutter-sm"> <div class="q-pb-sm row q-col-gutter-sm">
<div <div
@ -134,7 +146,6 @@ watch(
/> />
</div> </div>
</q-card> </q-card>
<q-card bordered flat class="q-px-md no-wrap row"> <q-card bordered flat class="q-px-md no-wrap row">
<div class="col-12 text-subtitle2 row items-center"> <div class="col-12 text-subtitle2 row items-center">
<span class="text-weight-medium text-dark">สอบไมาน</span> <span class="text-weight-medium text-dark">สอบไมาน</span>
@ -184,6 +195,24 @@ watch(
</div> </div>
<q-space /> <q-space />
<div class="items-center q-gutter-sm" style="display: flex"> <div class="items-center q-gutter-sm" style="display: flex">
<q-select
v-if="conclude"
dense
outlined
:options="optionsStatus"
option-value="value"
option-label="label"
label="ผลการสอบ"
map-options
emit-value
style="min-width: 140px"
:clearable="examResult !== ''"
@clear="examResult = ''"
v-model="examResult"
@update:model-value="
nornmalData ? props.onSearch?.() : getList('enter')
"
/>
<!-- นหาขอความใน table --> <!-- นหาขอความใน table -->
<q-input <q-input
standout standout

View file

@ -42,6 +42,7 @@ const rows = ref<any[]>([]);
const rowsData = ref<any[]>([]); const rowsData = ref<any[]>([]);
const importId = ref<string>(route.params.id as string); // Period Import Id const importId = ref<string>(route.params.id as string); // Period Import Id
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
const examResult = ref<string>(""); //
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"examID", "examID",
"profileID", "profileID",
@ -60,7 +61,7 @@ const visibleColumns = ref<String[]>([
"examAttribute", "examAttribute",
"examScore", "examScore",
"examResult", "examResult",
"exam_order", "number",
"applyDate", "applyDate",
]); ]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -68,21 +69,16 @@ const columns = ref<QTableProps["columns"]>([
name: "examID", name: "examID",
align: "left", align: "left",
label: "เลขประจำตัวสอบ", label: "เลขประจำตัวสอบ",
sortable: true, sortable: false,
field: "examID", field: "examID",
headerStyle: "font-size: 14px; min-width: 20px", headerStyle: "font-size: 14px; min-width: 20px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "profileID", name: "profileID",
align: "left", align: "left",
label: "เลขประจำตัวประชาชน", label: "เลขประจำตัวประชาชน",
sortable: true, sortable: false,
field: "profileID", field: "profileID",
headerStyle: "font-size: 14px; min-width: 20px", headerStyle: "font-size: 14px; min-width: 20px",
style: "font-size: 14px; ", style: "font-size: 14px; ",
@ -91,7 +87,7 @@ const columns = ref<QTableProps["columns"]>([
name: "fullName", name: "fullName",
align: "left", align: "left",
label: "ชื่อ-นามสกุล", label: "ชื่อ-นามสกุล",
sortable: true, sortable: false,
field: "personName", field: "personName",
headerStyle: "font-size: 14px; min-width: 250px", headerStyle: "font-size: 14px; min-width: 250px",
style: "font-size: 14px; ", style: "font-size: 14px; ",
@ -100,7 +96,7 @@ const columns = ref<QTableProps["columns"]>([
name: "hddPosition", name: "hddPosition",
align: "left", align: "left",
label: "บัญชีสอบ", label: "บัญชีสอบ",
sortable: true, sortable: false,
field: "hddPosition", field: "hddPosition",
headerStyle: "font-size: 14px; min-width: 250px", headerStyle: "font-size: 14px; min-width: 250px",
style: "font-size: 14px; ", style: "font-size: 14px; ",
@ -109,161 +105,106 @@ const columns = ref<QTableProps["columns"]>([
name: "dateOfBirth", name: "dateOfBirth",
align: "left", align: "left",
label: "วัน เดือน ปีเกิด", label: "วัน เดือน ปีเกิด",
sortable: true, sortable: false,
field: "dateOfBirth", field: "dateOfBirth",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "gender", name: "gender",
align: "left", align: "left",
label: "เพศ", label: "เพศ",
sortable: true, sortable: false,
field: "gender", field: "gender",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "position_name", name: "position_name",
align: "left", align: "left",
label: "ตำแหน่งที่สมัคร", label: "ตำแหน่งที่สมัคร",
sortable: true, sortable: false,
field: "position_name", field: "position_name",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "position_type", name: "position_type",
align: "left", align: "left",
label: "ประเภทที่สมัคร", label: "ประเภทที่สมัคร",
sortable: true, sortable: false,
field: "position_type", field: "position_type",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "position_level", name: "position_level",
align: "left", align: "left",
label: "ระดับที่สมัคร", label: "ระดับที่สมัคร",
sortable: true, sortable: false,
field: "position_level", field: "position_level",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "university", name: "university",
align: "left", align: "left",
label: "สถานศึกษา", label: "สถานศึกษา",
sortable: true, sortable: false,
field: "university", field: "university",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "degree", name: "degree",
align: "left", align: "left",
label: "วุฒิการศึกษา", label: "วุฒิการศึกษา",
sortable: true, sortable: false,
field: "degree", field: "degree",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "major", name: "major",
align: "left", align: "left",
label: "สาขาวิชาเอก", label: "สาขาวิชาเอก",
sortable: true, sortable: false,
field: "major", field: "major",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "certificateNo", name: "certificateNo",
align: "left", align: "left",
label: "เลขที่ใบประกอบวิชาชีพ", label: "เลขที่ใบประกอบวิชาชีพ",
sortable: true, sortable: false,
field: "certificateNo", field: "certificateNo",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "certificateIssueDate", name: "certificateIssueDate",
align: "left", align: "left",
label: "วันที่ได้รับใบประกอบวิชาชีพฯ", label: "วันที่ได้รับใบประกอบวิชาชีพฯ",
sortable: true, sortable: false,
field: "certificateIssueDate", field: "certificateIssueDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "examAttribute", name: "examAttribute",
align: "left", align: "left",
label: "สถานะการคัดกรองคุณสมบัติ", label: "สถานะการคัดกรองคุณสมบัติ",
sortable: true, sortable: false,
field: "examAttribute", field: "examAttribute",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "examScore", name: "examScore",
align: "left", align: "left",
label: "คะแนนรวม", label: "คะแนนรวม",
sortable: true, sortable: false,
field: "examScore", field: "examScore",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
@ -276,18 +217,13 @@ const columns = ref<QTableProps["columns"]>([
field: "examResult", field: "examResult",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
{ {
name: "exam_order", name: "number",
align: "center", align: "center",
label: "ลำดับที่สอบได้", label: "ลำดับที่สอบได้",
sortable: true, sortable: false,
field: "exam_order", field: "number",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
@ -295,15 +231,10 @@ const columns = ref<QTableProps["columns"]>([
name: "applyDate", name: "applyDate",
align: "left", align: "left",
label: "วันที่สมัครสอบ", label: "วันที่สมัครสอบ",
sortable: true, sortable: false,
field: "applyDate", field: "applyDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
}, },
]); ]);
const modalCandidates = ref(false); // dialog const modalCandidates = ref(false); // dialog
@ -369,7 +300,7 @@ async function fetchData() {
.post(config.API.getExamResultById(importId.value), { .post(config.API.getExamResultById(importId.value), {
examAttribute: "", examAttribute: "",
keyword: filter.value, keyword: filter.value,
examResult: "", examResult: examResult.value ? examResult.value : "",
page: initialPagination.value.page, page: initialPagination.value.page,
pageSize: initialPagination.value.rowsPerPage, pageSize: initialPagination.value.rowsPerPage,
}) })
@ -535,6 +466,7 @@ onMounted(async () => {
v-model:totalList="totalList" v-model:totalList="totalList"
v-model:total="total" v-model:total="total"
v-model:pagination="initialPagination" v-model:pagination="initialPagination"
v-model:exam-result="examResult"
:nornmalData="false" :nornmalData="false"
:conclude="true" :conclude="true"
:fetchData="fetchData" :fetchData="fetchData"
@ -582,8 +514,8 @@ onMounted(async () => {
<div v-else-if="col.name == 'c5'"> <div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" /> <q-checkbox disable v-model="props.row.c5" />
</div> </div>
<div v-else-if="col.name == 'exam_order'"> <div v-else-if="col.name == 'number'">
{{ col.value ? col.value : " " }} {{ col.value ? col.value : "" }}
</div> </div>
<div v-else> <div v-else>
{{ col.value ? col.value : "-" }} {{ col.value ? col.value : "-" }}

View file

@ -43,6 +43,7 @@ const totalList = ref<number>(0);
const importId = ref<string>(route.params.id as string); // Period Import Id const importId = ref<string>(route.params.id as string); // Period Import Id
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
const examResult = ref<string>(""); //
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"examID", "examID",
"profileID", "profileID",
@ -59,7 +60,7 @@ const visibleColumns = ref<String[]>([
"examAttribute", "examAttribute",
"examScore", "examScore",
"examResult", "examResult",
"exam_order", "number",
"applyDate", "applyDate",
]); ]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -67,18 +68,16 @@ const columns = ref<QTableProps["columns"]>([
name: "examID", name: "examID",
align: "left", align: "left",
label: "เลขประจำตัวสอบ", label: "เลขประจำตัวสอบ",
sortable: true, sortable: false,
field: "examID", field: "examID",
headerStyle: "font-size: 14px; min-width: 20px", headerStyle: "font-size: 14px; min-width: 20px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "profileID", name: "profileID",
align: "left", align: "left",
label: "เลขประจำตัวประชาชน", label: "เลขประจำตัวประชาชน",
sortable: true, sortable: false,
field: "profileID", field: "profileID",
headerStyle: "font-size: 14px; min-width: 20px", headerStyle: "font-size: 14px; min-width: 20px",
style: "font-size: 14px; ", style: "font-size: 14px; ",
@ -87,7 +86,7 @@ const columns = ref<QTableProps["columns"]>([
name: "fullName", name: "fullName",
align: "left", align: "left",
label: "ชื่อ-นามสกุล", label: "ชื่อ-นามสกุล",
sortable: true, sortable: false,
field: "personName", field: "personName",
headerStyle: "font-size: 14px; min-width: 250px", headerStyle: "font-size: 14px; min-width: 250px",
style: "font-size: 14px; ", style: "font-size: 14px; ",
@ -96,7 +95,7 @@ const columns = ref<QTableProps["columns"]>([
name: "hddPosition", name: "hddPosition",
align: "left", align: "left",
label: "บัญชีสอบ", label: "บัญชีสอบ",
sortable: true, sortable: false,
field: "hddPosition", field: "hddPosition",
headerStyle: "font-size: 14px; min-width: 250px", headerStyle: "font-size: 14px; min-width: 250px",
style: "font-size: 14px; ", style: "font-size: 14px; ",
@ -105,106 +104,88 @@ const columns = ref<QTableProps["columns"]>([
name: "dateOfBirth", name: "dateOfBirth",
align: "left", align: "left",
label: "วัน เดือน ปีเกิด", label: "วัน เดือน ปีเกิด",
sortable: true, sortable: false,
field: "dateOfBirth", field: "dateOfBirth",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "gender", name: "gender",
align: "left", align: "left",
label: "เพศ", label: "เพศ",
sortable: true, sortable: false,
field: "gender", field: "gender",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "position_name", name: "position_name",
align: "left", align: "left",
label: "ตำแหน่งที่สมัคร", label: "ตำแหน่งที่สมัคร",
sortable: true, sortable: false,
field: "position_name", field: "position_name",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "university", name: "university",
align: "left", align: "left",
label: "สถานศึกษา", label: "สถานศึกษา",
sortable: true, sortable: false,
field: "university", field: "university",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "degree", name: "degree",
align: "left", align: "left",
label: "วุฒิการศึกษา", label: "วุฒิการศึกษา",
sortable: true, sortable: false,
field: "degree", field: "degree",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "major", name: "major",
align: "left", align: "left",
label: "สาขาวิชาเอก", label: "สาขาวิชาเอก",
sortable: true, sortable: false,
field: "major", field: "major",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "certificateNo", name: "certificateNo",
align: "left", align: "left",
label: "เลขที่ใบประกอบวิชาชีพ", label: "เลขที่ใบประกอบวิชาชีพ",
sortable: true, sortable: false,
field: "certificateNo", field: "certificateNo",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "certificateIssueDate", name: "certificateIssueDate",
align: "left", align: "left",
label: "วันที่ได้รับใบประกอบวิชาชีพฯ", label: "วันที่ได้รับใบประกอบวิชาชีพฯ",
sortable: true, sortable: false,
field: "certificateIssueDate", field: "certificateIssueDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "examAttribute", name: "examAttribute",
align: "left", align: "left",
label: "สถานะการคัดกรองคุณสมบัติ", label: "สถานะการคัดกรองคุณสมบัติ",
sortable: true, sortable: false,
field: "examAttribute", field: "examAttribute",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "examScore", name: "examScore",
align: "left", align: "left",
label: "คะแนนรวม", label: "คะแนนรวม",
sortable: true, sortable: false,
field: "examScore", field: "examScore",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
@ -213,19 +194,17 @@ const columns = ref<QTableProps["columns"]>([
name: "examResult", name: "examResult",
align: "left", align: "left",
label: "ผลการสอบ", label: "ผลการสอบ",
sortable: true, sortable: false,
field: "examResult", field: "examResult",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "exam_order", name: "number",
align: "center", align: "center",
label: "ลำดับที่สอบได้", label: "ลำดับที่สอบได้",
sortable: true, sortable: false,
field: "exam_order", field: "number",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
@ -233,12 +212,10 @@ const columns = ref<QTableProps["columns"]>([
name: "applyDate", name: "applyDate",
align: "left", align: "left",
label: "วันที่สมัครสอบ", label: "วันที่สมัครสอบ",
sortable: true, sortable: false,
field: "applyDate", field: "applyDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const rows = ref<RecruitDetailResponse[]>([]); const rows = ref<RecruitDetailResponse[]>([]);
@ -310,7 +287,7 @@ async function fetchData() {
.post(config.API.getDisableExamResultById(importId.value), { .post(config.API.getDisableExamResultById(importId.value), {
examAttribute: "", examAttribute: "",
keyword: filter.value, keyword: filter.value,
examResult: "", examResult: examResult.value ? examResult.value : "",
page: initialPagination.value.page, page: initialPagination.value.page,
pageSize: initialPagination.value.rowsPerPage, pageSize: initialPagination.value.rowsPerPage,
}) })
@ -469,6 +446,7 @@ onMounted(async () => {
v-model:inputfilter="filter" v-model:inputfilter="filter"
v-model:total="total" v-model:total="total"
v-model:inputvisible="visibleColumns" v-model:inputvisible="visibleColumns"
v-model:exam-result="examResult"
:nornmalData="false" :nornmalData="false"
:conclude="true" :conclude="true"
:fetchData="fetchData" :fetchData="fetchData"
@ -516,8 +494,8 @@ onMounted(async () => {
<div v-else-if="col.name == 'c5'"> <div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" /> <q-checkbox disable v-model="props.row.c5" />
</div> </div>
<div v-else-if="col.name == 'exam_order'"> <div v-else-if="col.name == 'number'">
{{ col.value ? col.value : " " }} {{ col.value ? col.value : "" }}
</div> </div>
<div v-else> <div v-else>
{{ col.value ? col.value : "-" }} {{ col.value ? col.value : "-" }}