728x90

STUDY/vuejs 15

[vue: worklist 제작] 2. 변환된 json으로 1Depth 단위로 테이블 그리기(2)

1. 동일한 1depth별로 table을 나눠서 랜딩 2. 1depth별 tab button 생성하여 클릭시 해당 테이블로 스크롤 이동 data(){ return{ iaList : this.$store.state.iaData, groupTarget:'1depth', groupTitles: [], groups : [], } }, groupTitles : 그룹별 테이블로 이동할 버튼들 groups : 1depth별 table로 나뉘어질 배열 [{'1depth title' : [],[],[]}, {} , ..] groupTarget : 그룹을 나뉠 기준 methods : { setGroupTitles(){ // tab category let tabList = []; this.iaList.filter((item..

STUDY/vuejs 2022.09.28

[vue: worklist 제작] 2. 변환된 json으로 1Depth 단위로 테이블 그리기(1)

store.js import Vuex from 'vuex'; import IA from './assets/ia-json.json'; const store = new Vuex.Store({ state: { iaKeys : [], iaData : [] }, mutations: { SET_IA(state,lists){ state.iaData = lists; }, SET_KEYS(state,keys){ state.iaKeys = keys; }, MODI_IA(state,{newIA,id}){ const list = state.iaData.filter ((ia)=>{ if(ia[id] == newIA[id]) { ia = newIA } }) state.iaData = list; } }, actions: { FET..

STUDY/vuejs 2022.09.23

[vue: worklist 제작] - 계획

1. csv파일을 json으로 변환하기 2. 변환된 json으로 1Depth 단위로 테이블 그리기 2-1. 전체 테이블 제어할수 있도록 class명 통일화 2-2. 진행상태 select (대기:기본, 진행중, 완료, 제외..) 2-3. 작업물 경로 링크 2-3-1. 마우스오버시 미리보기 제공 2-3-2. 경로 수정버튼 2-4. 메모 2-4-1. 메모수정 가능하도록 textarea 3. 탭으로 1depth 인덱싱 4. 진행상황 4-1. 완료, 제외, total count 4-2. 완료, 제외, total 클릭시 해당 리스트만 보여짐 4-3. progress bar

STUDY/vuejs 2022.09.14

vue에서 sass 파일로 사용하기

> npm init pacage.json 파일 생성 > npm i -g vue > npm i -g @vue/cli npm을 통해 vue와 vue cli 를 global로(-g) 설치(i) > vue create 프로젝트_생성할_폴더명 > npm i -D node-sass sass-loader node-sass와 sass-loader를 devDependencies로(-D) 설치(i) 컴포넌트에서 인터널로 sass사용 가능 sass폴더, 파일로 사용하기 src 하위에 sass폴더 생성, style.scss 파일 생성 vue config에서 sass파일 경로 알려주기 vue.config.js css: { loaderOptions: { sass: { additionalData: ` @import "@/sass/..

STUDY/vuejs 2022.09.14
728x90