File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<table :class="{ 'tbl': true, [className]: className }">
<colgroup>
<col v-for="(w, idx) in colgroup" :width="w" :key="idx" />
</colgroup>
<thead>
<tr>
<th v-for="(title, idx) in thead" :key="idx" class="text-ct">
{{ title }}
</th>
</tr>
</thead>
<tbody>
<template v-if="tbody.length > 0">
<tr
v-for="(row, idx) in tbody"
:key="idx"
@click="handleClick(row, idx)"
class="cursor"
:class="isboldCheck(idx)"
>
<td v-if="$slots.checkbox" class="text-ct">
<slot name="checkbox" :row="row" :idx="idx"></slot>
</td>
<td
v-for="(content, index) in row"
:key="index"
:class="index === 'title' ? 'text-lf table-title' : 'text-ct'"
>
<svg-icon type="mdi" :path="pinPath" :width="20" :height="20" v-if="index == 'bbsNm' && ntcList.includes(idx)"></svg-icon>
<svg-icon type="mdi" :path="lockPath" :width="20" :height="20" v-else-if="index == 'bbsNm' && lockList.includes(idx)"></svg-icon>
<p>{{ content }}</p>
</td>
<td v-if="$slots.button">
<slot name="button" :row="row" :idx="idx"></slot>
</td>
</tr>
</template>
<tr v-else>
<td :colspan="thead.length" class="text-ct data-none">
등록된 정보가 존재하지 않습니다.
</td>
</tr>
</tbody>
</table>
</template>
<script>
import { mdiPin,mdiLock } from '@mdi/js';
export default {
props: {
colgroup: {
type: Array,
default: [],
},
thead: {
type: Array,
default: [],
},
tbody: {
type: Array,
default: [],
},
className: {
type: String,
default: "",
},
ntcCnt: {
type: Number,
default: 0,
},
lockList: {
type: Array,
default: [],
},
ntcList: {
type: Array,
default: [],
},
},
data() {
return {
pinPath: mdiPin,
lockPath: mdiLock,
};
},
methods: {
handleClick: function (row, idx) {
this.$emit("listClick", idx); // 'listClick' 이벤트 발생
},
isboldCheck(index) {
return this.ntcList.includes(index) ? "contentBold" : "";
},
},
watch: {},
computed: {},
components: {},
mounted() {},
};
</script>
<style scoped>
.contentBold {
font-weight: bold;
}
.lock-icon {
width: 15px;
height: 15px;
margin-right: 5px;
margin-left: 5px;
display: inline-block;
vertical-align: inherit;
}
</style>