'vue.js' 태그의 글 목록

'vue.js'에 해당되는 글 7건

2022.07.27 Vue.js 와 DataTables 함께 사용하기 구현 샘플
2022.07.20 Vue.js 와 DataTables 함께 사용하기
2022.07.19 table tr 에 addClass 로 속성 추가
2021.03.08 Spring Boot + Vue.js 개발
2021.02.05 VUE 컴포넌트 재활용을 위한 설계
2021.02.05 [Vue.js] Vue 컴포넌트간의 통신!
2021.02.03 [맨땅에 VueJS] 예제로 배우는 VueJS를 시작하며 / VueJS 강의

Vue.js 와 DataTables 함께 사용하기 구현 샘플

- Vue.js 로 데이터 랜더링

- DataTables 에 데이터 바인딩

- Vue.js 와 DataTables 의 버튼 클릭 이벤트 차이

- i18n 다국어 처리

- BootStrap 4로 페이지 구성

https://jsfiddle.net/mijisoo/q56pb0t9/62/

Posted by 굥쓰

Vue.js 와 DataTables 함께 사용하기

Bootstrap + jQuery 기반 프로젝트 에서 Vue.js 를 일부 페이지만 섞어서 사용하는데

Vue.js 로 만든 페이지에서도 DataTables 를 사용하고 싶을 때가 있습니다.

DataTables 은 jQuery 를 통해 주로 쓰이는데 Vue.js 와 함께 쓰일 때는 역할을 명확하게 구분해야

그나마 쓸 수 있을 정도인듯 합니다.

일단 Vue.js 로는 DataTables 테이블 바인딩, 값에 따른 화면 제어 위주로만 활용하고

DataTables 의 정렬, 페이징, 내용 검색 등등의 역할을 jQuery 로 분리해서 사용하고자 합니다.

물론 vue.js 로 최적화된 DataTables 라이브러리를 활용하면 되겠지만, 별도의 학습이 필요하고

구현부도 순수 DataTables 의 처리와 달라 지므로 각각의 이점만 활용해 보려는 시도라 보면 됩니다.

- 구현 아이디어

1) Vue.js 로 DataTables 의 데이터를 랜더링 하도록 구성

==> 화면에 데이터가 바인딩되고 vue.js 를 통해 화면 제어는 가능하나 DataTables 의 정렬, 페이징등의 기능은 동작 하지 않음.

2) DataTables 의 기능 중 Static Table 을 DataTables 로 변환 하는 속성을 활용하여

Vue.js 로 랜더링이 끝난 Table 을 DataTables 로 변환

==> DataTables 테이블로 인식이 되면 서 정렬, 페이징, 검색 기능등의 이벤트 활용 가능.

===> Vue.js 에서 데이터 새로고침이 이뤄진 이후 DataTables 재 생성 이벤트 호출

Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.

https://datatables.net/examples/basic_init/zero_configuration.html

vue.js 의 updated 이벤트에서 DataTables 초기화 (재 생성)

https://datatables.net/manual/server-side

p.s. Python flask 와 DataTables 함께 사용

https://github.com/SergioLlana/datatables-flask-serverside

Posted by 굥쓰

table tr 에 addClass 로 속성 추가

https://stackoverflow.com/questions/39609937/vue-js-how-to-add-class-to-table-row-depending-on-property-value

vue.js How to add class to table row depending on property value

I am trying to add bootstrap classes (success, waning... ) to table rows depending on a propertys (overallStatus) value. How would i implement this functionallity in the code below? Thanks in adv...

stackoverflow.com

적용 예시

<table class="table table-striped table-bordered table-hover" id="datatable__item" style="width:100%;">
    <thead>
        <tr>
            <th class="text-nowrap" data-i18n="item.label.selled_time">SELLED_TIME</th>
            <th class="text-nowrap" data-i18n="character.label.group_id">GROUP_ID</th>
            <th class="text-nowrap" data-i18n="character.label.uid">UID</th>
            <th class="text-nowrap" data-i18n="character.label.char_id">CHAR_ID</th>
            <th class="text-nowrap" data-i18n="item.label.buyer_uid">BUYER_UID</th>
            <th class="text-nowrap" data-i18n="trade.label.price">PRICE</th>
            <th class="text-nowrap" data-i18n="trade.label.price_per_piece">PRICE_PER_PIECE</th>
            <th class="text-nowrap" data-i18n="item.label.item_id">ITEM_ID</th>
            <th class="text-nowrap" data-i18n="item.label.item_name">ITEM_ID</th>
            <th class="text-nowrap" data-i18n="item.label.count">COUNT</th>
            <th class="text-nowrap" data-i18n="item.label.serial">SERIAL</th>
            <th class="text-nowrap" data-i18n="item.label.state">STATE</th>
            <th class="text-nowrap" data-i18n="common.label.reg_date">regdate</th>
        </tr>
    </thead>
    <tbody>
        <template v-for="(data, index) in data_list">
            <tr v-on:click="rowSelect(data)" :class="[data.pricePerPiece >= $data.price * 3 ? 'bg-danger' : data.pricePerPiece >= $data.price * 2 ? 'bg-warning' : '']">
                <td>{{ data.selledTime }}</td>
                <td>{{ data.serverGroupId }}</td>
                <td>{{ data.uId }} <button data-style="zoom-in" type="button" class="btn btn-xs btn-success m-r-xs button-click" v-on:click="rT(data)"><span data-i18n="common.button.detail">detail</span></button></td>
                <td>{{ data.charId }}</td>
                <td>{{ data.buyerUid }} <button data-style="zoom-in" type="button" class="btn btn-xs btn-success m-r-xs button-click" v-on:click="rT(data)"><span data-i18n="common.button.detail">detail</span></button></td>
                <td>{{ data.price }}</td>
                <td>{{ data.pricePerPiece }}</td>
                <td>{{ data.itemId }} <button id="ladda-trade-monitoring" hidden data-style="zoom-in" type="button" class="btn btn-xs btn-success m-r-xs button-click" v-on:click="readDetail(data)"><span data-i18n="common.button.detail">detail</span></button></td>
                <td>{{ data.itemName }}</td>
                <td>{{ data.count }}</td>
                <td>{{ data.serial }}</td>
                <td>{{ data.state }}</td>
                <td>{{ data.regDate }}</td>
            </tr>
        </template>
    </tbody>
</table>

pricePerPiece 값이 기준치 보다 3배이상이면 danger, 2배면 warning 속성 부여