FRONT (22) 썸네일형 리스트형 [Vue.js] 카드 테이블 (Card Table) 만들기 참고한 사이트 https://element-plus.org/en-US/component/space.html#basic-usage Space | Element Plus element-plus.org 카드 등록 / 수정 / 삭제 기능 구현 세부 기능은 보안 문제로 각설. 아래는 내가 응용해서 실사용한 테이블 템플릿이다. Sample 추가 test 명 수정 삭제 {{ slotData.row.id }} {{ slotData.row.nm }} 상세 목록 등록 / 수정 등록 / 수정 시 다른 메뉴 정보 조회 및 선택 체크 박스로 다중 선택 후 추가 추가 후 목록에 반영 삭제 버튼 클릭 시 등록 data에서 삭제 목록에서 상세 버튼 클릭 시 기본 틀이 잡혀있는 상태에 내가 살만 붙이면 되서 너무 편리하다. [JavaScript] 초 간단 유효성 체크 ( 이메일, IP, Port, 비밀번호, 글자 길이 제한 ) 1. 이메일 유효성 검사 let emailCheck = true; const ValidateEmail = (text) => { var emailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ if (emailformat.test(text)) { return emailCheck = true; } else { return emailCheck = false; } } 2. IP 유효성 검사 let srvrIpCheck = true; const ValidateServerIp = (text) => { var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-.. [JavaScript] input 입력 시 한글 입력 제한 설정 input 창에 입력 시 한글 입력을 막고 싶다. 입력된 값에 허용되지 않은 문자는 정규표현식을 사용하여 문자열에서 제외하는 replace() 함수를 실행할 것이다. @input 을 이용하여 함수를 호출한다. const bindKorean = (index) => { const regExp = /[^0-9a-zA-Z]/g; if (regExp.exec(state.list[index].name)) { state.list[index].name = state.list[index].name.replace(regExp, ''); } }; .exec 메소드는 정규식 패턴에 맞는 문자열 탐색을 수행하는 메소드이다. 문자열을 탐색하여 일치하는 값을 찾으면 .replace 로 해당 문자열을 지운다. @input 을 이용하.. [JavaScript] 두 개의 객체 비교 후 중복 값 제거 필터를 사용하여, map의 id와 data의 id가 일치하면 data에서 해당 값을 제거한다. let result = data.filter(item => { return !map.some(other => other.id === item.id) }) 일치하지 않을 경우 제거 하고 싶다면 let result = data.filter(item => { return map.some(other => other.id === item.id) }) 다중 조건(필드)으로 제거하기. let result = data.filter(item => { return !map.some(other => other.id === item.id && other.name === item.name) }) [Vue.js] 체크박스(checkbox) 체크 유무를 특정 값으로 바인딩 하기 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 하지만 다른 문자로 치환이 필요한경우가있다 체크 유무를 따져서 값을 변경해주는 방법 외에 input의 true-value와 false-value props를 사용한다. 문자열 뿐만 아니라 메소드도 가능하다. 이때 주의할점은 form submit시 체크 되지않은 값은 전송되지 않는다. [Vue.js] 접히는(folding) 테이블 만들기 - Expandable Table 1. vuetifyjs 사용 https://v15.vuetifyjs.com/ko/components/data-tables/ Data tables Component — Vuetify.js The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection. v15.vuetifyjs.com Expandable Table 검색해서 참고 사용. 2. type="expand" 사용 https://element-plus.org/en-US/component/table.html#expandable.. [Javascript] 테이블 행 숨기기/보이기 - display const item = document.getElementById('test') item.style.display = 'none'; item.style.display = ''; style.display 값을 지정하여 간단하게 테이블의 행을 숨기고 보여준다. [JavaScript] id 추가 , 수정 , 삭제 1. id 추가 document.querySelector('.sample').id = 'test'; 추가하려는 class명을 찾아 id 명을 입력해주면, 해당 위치에 id가 추가 된다. 2. id 수정 document.querySelector('.sample').setAttribute("test", "test2"); 기존 id 명을 원하는 id 명으로 수정 한다. 3. id 삭제 document.querySelector('.sample').removeAttribute('test2'); 해당하는 class명이 존재하는 곳의 id가 삭제 된다. removeAttribute() 메서드는 하나의 속성만 제거할 수 있다. 모든 속성을 제거하고 싶다면 반복문을 이용해야 한다. 1) const cellCheck = .. [JavaScript] QuerySelector(), QuerySelectorAll() , ClassList 추가/ 삭제 1. QuerySelector() DOM에서 원하는 element를 찾기 위해서 querySelector() 를 사용한다. 파라미터로 입력받은 CSS선택자를 사용해서 element를 찾아준다. 파라미터로 입력받은 CSS 선택자로 찾은 여러개의 element 중 첫번째 element를 리턴합니다. 2. QuerySelectorAll() 사용법은 QuerySelector()와 동일하다. 차이점은 CSS선택자로 찾은 모든 element 목록을 리턴합니다. 3. ClassList 1) ClassList 추가 해당 요소의 클래스 속성값을 추가한다. 동일 클래스명이 존재하면 무시한다. const rows = document.querySelector('.sample'); rows.classList.add('test'.. [Vue.js] Vue3 데이터 중복 검사 유효성 검사와 마찬가지로 많이 사용하는 데이터 중복 검사. 간편하게 해보자. index 기준으로 중복 데이터 찾기. 이미 존재하는 이름 입니다. const checkData = (index) => { if (tableData.value.length > 1) { let dataIndex = 0; for (let data of tableData.value) { if (data.name != "" && dataIndex != index) { if (data.name == tableData.value[index].name) { return true; } } dataIndex++ } } return false; } 중복 될 때. 중복 되지 않을 때. 입력 값 기준으로 찾는거라 실시간으로 적용 된다. + 이런식으로.. 이전 1 2 3 다음
