수정2...
This commit is contained in:
parent
abe43faa2b
commit
612b5f9a1b
@ -1,42 +1,47 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/todo">Todo</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="통합검색"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<b-navbar toggleable="lg" type="dark" variant="info">
|
||||
<b-navbar-brand href="#">NavBar</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<b-nav-item href="#" disabled>Disabled</b-nav-item>
|
||||
<b-nav-item href="/todo">Todo</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<b-nav-form>
|
||||
<b-form-input
|
||||
size="sm"
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
></b-form-input>
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit"
|
||||
>Search</b-button
|
||||
>
|
||||
</b-nav-form>
|
||||
|
||||
<!-- <b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown> -->
|
||||
|
||||
<b-nav-item-dropdown right>
|
||||
<!-- Using 'button-content' slot -->
|
||||
<template #button-content>
|
||||
<em>User</em>
|
||||
</template>
|
||||
<b-dropdown-item href="#">Profile</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -36,13 +36,11 @@
|
||||
</b-col>
|
||||
<b-col cols="4" class="border">
|
||||
<b-input-group>
|
||||
<label class="input-group-text">
|
||||
<b-form-select
|
||||
class="d-flex flex-nowrap"
|
||||
v-model="filterDateField"
|
||||
:options="filterDateFieldOptions"
|
||||
></b-form-select>
|
||||
</label>
|
||||
<b-form-select
|
||||
class="d-flex flex-nowrap"
|
||||
v-model="filterDateField"
|
||||
:options="filterDateFieldOptions"
|
||||
></b-form-select>
|
||||
<b-form-input v-model="filterDateStart" type="date"></b-form-input>
|
||||
~
|
||||
<b-form-input v-model="filterDateEnd" type="date"></b-form-input>
|
||||
@ -60,89 +58,89 @@
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="overflow-auto">
|
||||
<b-table
|
||||
id="todoTable"
|
||||
ref="todoTable"
|
||||
:page="page"
|
||||
:items="rows"
|
||||
:fields="fields"
|
||||
:per-page="perPage"
|
||||
:sort-by.sync="sortBy"
|
||||
:sort-desc.sync="sortDesc"
|
||||
@sort-changed="sortClick"
|
||||
label-sort-asc=""
|
||||
label-sort-desc=""
|
||||
label-sort-clear=""
|
||||
:select-mode="selectedRowMode"
|
||||
selectable
|
||||
@row-selected="rowSelectedToggle"
|
||||
:busy="isBusy"
|
||||
:sticky-header="commonTableAttributes.stickyHeader"
|
||||
:no-border-collapse="commonTableAttributes.noBorderCollapse"
|
||||
:striped="commonTableAttributes.striped"
|
||||
:hover="commonTableAttributes.hover"
|
||||
:no-local-sorting="commonTableAttributes.noLocalSorting"
|
||||
:bordered="commonTableAttributes.bordered"
|
||||
:dark="commonTableAttributes.dark"
|
||||
:head-variant="commonTableAttributes.headVariant"
|
||||
>
|
||||
<!-- Column별 Filter용 -->
|
||||
<template #thead-top>
|
||||
<b-tr>
|
||||
<b-th colspan="4"> </b-th>
|
||||
<b-th
|
||||
><b-form-select
|
||||
v-model="filterIsDone"
|
||||
:options="filterIsDoneFieldOptions"
|
||||
@change="isDoneClick"
|
||||
></b-form-select
|
||||
></b-th>
|
||||
<b-th></b-th>
|
||||
</b-tr>
|
||||
</template>
|
||||
<!-- 비/선택 Row를 토글용 -->
|
||||
<template #cell(rowSelect)="{ rowSelected }">
|
||||
<template v-if="rowSelected">
|
||||
<span aria-hidden="true">✓</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span aria-hidden="true"> </span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- Row의 Index를 이용한 번호 출력 -->
|
||||
<template #cell(id)="row">
|
||||
<b-link ref="edit/{{row.item.id}}">
|
||||
{{ total - (page * perPage + row.index) + perPage }}
|
||||
</b-link>
|
||||
</template>
|
||||
<!-- 제목부분 출력용 -->
|
||||
<template #cell(title)="row">
|
||||
{{ row.item.title }}
|
||||
</template>
|
||||
<!-- 상세 내용 출력용 -->
|
||||
<template #cell(content)="row">
|
||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||
[{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
|
||||
</b-button>
|
||||
</template>
|
||||
<template #row-details="row">
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col v-html="row.item.content"></b-col>
|
||||
</b-row>
|
||||
<b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
|
||||
</b-card>
|
||||
</template>
|
||||
<!-- 데이터 로딩중 출력용 -->
|
||||
<template #table-busy>
|
||||
<div class="text-center text-danger my-2">
|
||||
<b-spinner class="align-middle"></b-spinner>
|
||||
<strong>Loading...</strong>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-table
|
||||
id="todoTable"
|
||||
ref="todoTable"
|
||||
:page="page"
|
||||
:items="rows"
|
||||
:fields="fields"
|
||||
:per-page="perPage"
|
||||
:sort-by.sync="sortBy"
|
||||
:sort-desc.sync="sortDesc"
|
||||
@sort-changed="sortClick"
|
||||
label-sort-asc=""
|
||||
label-sort-desc=""
|
||||
label-sort-clear=""
|
||||
:select-mode="selectedRowMode"
|
||||
selectable
|
||||
@row-selected="rowSelectedToggle"
|
||||
:busy="isBusy"
|
||||
:sticky-header="commonTableAttributes.stickyHeader"
|
||||
:no-border-collapse="commonTableAttributes.noBorderCollapse"
|
||||
:striped="commonTableAttributes.striped"
|
||||
:hover="commonTableAttributes.hover"
|
||||
:no-local-sorting="commonTableAttributes.noLocalSorting"
|
||||
:bordered="commonTableAttributes.bordered"
|
||||
:dark="commonTableAttributes.dark"
|
||||
:head-variant="commonTableAttributes.headVariant"
|
||||
>
|
||||
<!-- Column별 Filter용 -->
|
||||
<template #thead-top>
|
||||
<b-tr>
|
||||
<b-th colspan="4"> </b-th>
|
||||
<b-th
|
||||
><b-form-select
|
||||
v-model="filterIsDone"
|
||||
:options="filterIsDoneFieldOptions"
|
||||
@change="isDoneClick"
|
||||
></b-form-select
|
||||
></b-th>
|
||||
<b-th></b-th>
|
||||
</b-tr>
|
||||
</template>
|
||||
<!-- 비/선택 Row를 토글용 -->
|
||||
<template #cell(rowSelect)="{ rowSelected }">
|
||||
<template v-if="rowSelected">
|
||||
<span aria-hidden="true">✓</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span aria-hidden="true"> </span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- Row의 Index를 이용한 번호 출력 -->
|
||||
<template #cell(id)="row">
|
||||
<b-link ref="edit/{{row.item.id}}">
|
||||
{{ total - (page * perPage + row.index) + perPage }}
|
||||
</b-link>
|
||||
</template>
|
||||
<!-- 제목부분 출력용 -->
|
||||
<template #cell(title)="row">
|
||||
{{ row.item.title }}
|
||||
</template>
|
||||
<!-- 상세 내용 출력용 -->
|
||||
<template #cell(content)="row">
|
||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||
[{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
|
||||
</b-button>
|
||||
</template>
|
||||
<template #row-details="row">
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col v-html="row.item.content"></b-col>
|
||||
</b-row>
|
||||
<b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
|
||||
</b-card>
|
||||
</template>
|
||||
<!-- 데이터 로딩중 출력용 -->
|
||||
<template #table-busy>
|
||||
<div class="text-center text-danger my-2">
|
||||
<b-spinner class="align-middle"></b-spinner>
|
||||
<strong>Loading...</strong>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
<b-container fluid>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<p>{{ selectedRows }}</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user