<template> <table :class="{ 'tbl data': 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" > <div class="layout"> <svg-icon type="mdi" :path="pinPath" :width="18" :height="18" v-if="index == 'bbsNm' && ntcList.includes(idx)"></svg-icon> <svg-icon type="mdi" :path="lockPath" :width="18" :height="18" v-else-if="index == 'bbsNm' && lockList.includes(idx)"></svg-icon> <p>{{ content }}</p> </div> </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> 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: { pinPath() { return this.$iconPath('mdiPin'); }, lockPath() { return this.$iconPath('mdiLock'); } }, 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>