Jquery footable을 사용하는 테이블이 있습니다. 나는 VueJS와 같은 것을 찾지 못했습니다. 나는 다시 보여 다음VueJS를 사용할 때 Footable 속성이 손실 됨 v-false/true 인 경우
<tr v-if="isVisible">...</tr>
과 :
는 지금, 나는
$vm0.isVisible = false; // (Each row is a vue component)
와 함께 삭제/I 행을 삭제할 때, 테이블에 행을 복원 할
$vm0.isVisible = true;
행이 표시되지만 모든 footable 속성 (data-toggle="true", data-hide="all" 등)이 손실됩니다.
아무도 왜 그런 일이 일어나는 지 알고 있으며, 그것에 대해 할 일이 있다면 ???
Vue가 다른 dom-manipulators와 함께 행복하게 살기를 기대하지 마십시오. Vue는 이벤트 리스너가 요소에 마운트 될 때 스트립합니다. 그런 다음 필요할 때마다 책임을지는 돔 부분을 행복하게 덮어 씁니다. 레거시 자바 스크립트 없이는 살 수 없다면, Vue가 마운트 된 후에 실행시켜야합니다. 당신은 footable에 의해 관리되는 탁자 안에 작은 Vues가 달려있는 상태에서 반대되는 트릭을 시도하고 있습니다. 이것은 결코 작동하지 않을 것입니다.
VueJS와 동일한 기능을 찾을 수 없습니다.
https://github.com/ratiw/vue-table을 사용해 보셨습니까? 나는 footable과 비슷하다고 생각합니다.
Vue.js는 Virtual-Dom을 사용하여 DOM 조작을 수행합니다. 따라서 html 요소는 렌더링 전에 실제로 javascript 객체입니다.
예를 들어, (가상 DOM 요소 등) <tr> 요소 객체 같이 아마도 :
{tagName: 'tr', props: {class: 'table-row'}, children: []}
상기 목적은 최종적으로 <tr class="table-row"> 렌더링한다.
그러나 jQuery Footable에서 <tr> 요소는 모든 소품이 Vue.js 대신 jQuery에 의해 제어되는 data-toggle 등의 소품이있는 단지 dom 태그입니다. Vue는 jQuery로 만든이 소품 (data-toggle 종류)에 대해 아무것도 모릅니다. 따라서 v-if 또는 v-show을 사용하여 다시 표시하려면 'Vue 유형의 요소'로만 복구됩니다.
플렉스 박스 디자인을 사용하여 멋진 반응성 테이블을 만들 수 있으며 배우기가 매우 쉽습니다.
플렉스 박스 등으로 응답 성있는 표를 쓰고 싶지 않다면 ElementUI/iView/Vue Material/(Awesome Vue는 많은 유용한 저장소가 있습니다)에서 시험해보기를 원할 수 있습니다.
행운을 빈다. 당신이 그것을 만들 수 있기를 바랍니다!