elsa vue 다운로드 - elsa vue 소스 코드 다운로드

elsa vue

기타 카테고리

1.0.0

다운로드

엘사

⚡ elsa(eleme simple admin)는 element-ui를 기반으로 하며 el-form, el-table 및 기타 구성 요소를 캡슐화하며 백엔드 관리 프로젝트의 신속한 개발에 적합합니다.

사용 예는 다음을 참조하세요.

빠른 시작

 npm i elsa - vue - S

 // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'

Vue . use ( Element )
Vue . use ( Elsa )

특징

다른 카드
- 메인 및 자막 설정 지원
다른 테이블
- 구성 가능한 목록 열
- 페이징 제어 지원
- 트리 형태의 데이터 표시 및 지연 로딩 지원
엘사 형식
- 지원되는 양식 구성 요소
  - 엘 입력
  - 엘라디오
  - 엘 체크박스
  - 엘-선택
  - 엘 업로드
  - 엘-xxx-선택기
- 맞춤 레이아웃
- 양식 체크섬 재설정
- 중첩된 객체 구문 분석
- 양식 전체 비활성화 설정
- 양식 항목에 대한 팁 정보
- 양식 항목: 동적/링크됨
  - 비활성화/활성화
  - 표시/숨기기
  - 여러 옵션 옵션을 동적으로 수정

엘사 테이블

용법:

Array 유형의 데이터 소스 dataSource를 가져옵니다.
dataSource의 객체 속성을 기반으로 표시되는 열 정보를 구성합니다.
페이징 매개변수 페이지 매김 설정

 < elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " />

 export default {
  data ( ) {
    return {
      dataSource : [
        { name : 'eminoda' , age : 30 } ,
        { name : 'foo' , age : 40 } ,
        { name : 'bar' , age : 50 }
      ] ,
      columns : [
        { label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
        { label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
        { label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
      ] ,
      pagination : {
        pageSize : 10 ,
        currentPage : 1 ,
        total : 0 ,
        currentChange : currentPage => { } ,
        sizeChange : pageSize => { }
      }
    }
  }
}

ElsaTable 속성

매개변수	설명하다	유형
기둥	컬럼정보	정렬
데이터소스	데이터 소스	정렬
쪽수 매기기	페이지 매김 정보	물체
...elProps	el-테이블 속성

ElsaTable.columns

매개변수	설명하다	유형	선택적 값
유형	선택은 선택 상자 열을 추가합니다. 인덱스에 일련번호 열 추가 확장 더 보기	끈	선택/색인/확장
상표	제목	끈
소품	구문 분석 필드	끈
너비	해당 열 너비	끈
결정된	열이 왼쪽 또는 오른쪽에 고정되었는지 여부에 관계없이 true는 왼쪽에 고정됨을 의미합니다.	문자열/부울	사실, 왼쪽, 오른쪽
포맷터	데이터 형식화	함수(행, 열, 셀 값)
쇼 오버플로 툴팁	콘텐츠가 너무 길어서 숨겨져 있는 경우 도구 설명 표시	부울

자세한 내용은 el-table 열을 참조하세요.

ElsaTable.elProps

매개변수	설명하다	유형	선택적 값	기본값
~~데이터~~	dataSource로 교체
국경	세로 테두리 유무	부울		거짓
크기	크기	끈	중형/소형/소형
맞다	기둥 너비가 자립 가능한지 여부	부울		진실

자세한 내용은 el-table 속성을 참조하세요.

ElsaTable 이벤트

매개변수	설명하다	유형	선택적 값	기본값
선택-변경	이 이벤트는 선택 항목이 변경될 때 트리거됩니다.	기능(선택)

자세한 내용은 el-table 이벤트를 참조하세요.

? 참고: 일부 이벤트는 현재 파일 구조(예: 정렬, 필터링, 양식 병합 등)를 기반으로 구현하기 어렵고 가져오기 방법 대신 데이터에서 구성 파일의 내용을 정의하여 구현할 수 있습니다. )

엘사 형식

용법:

양식 데이터 모델 모델 정의
양식 필드 구성 및 레이아웃 정의(선택 사항)

 < elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
  < el-row type =" flex " justify =" center " >
    < el-button @click =" submit " type =" primary " >提交</ el-button >
    < el-button @click =" reset " type =" warning " style =" margin-left:10px; " >重置</ el-button >
  </ el-row >
</ elsa-form >

 export default {
  data ( ) {
    return {
      fields : {
        name : {
          label : '用户名' ,
          elTag : 'el-input' ,
          elAttrs : {
            placeholder : '请输入用户名'
          } ,
          customRender : 'nameCheck' ,
          rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
        } ,
        password : {
          label : '密码' ,
          elTag : 'el-input' ,
          elAttrs : {
            type : 'password' ,
            showPassword : true
          } ,
          rules : [ { required : true , trigger : 'change' } ]
        }
      } ,
      model : {
        name : '' ,
        password : ''
      }
    }
  }
}

ElsaForm 속성

매개변수	설명하다	유형	기본값
구성	양식 항목 구성	물체
모델	양식 데이터 모델	물체
공들여 나열한 것	양식 레이아웃	배열
장애가 있는	전체 양식이 비활성화되었습니다.	부울	거짓
...elProps	양식 항목 구성	물체

ElsaForm.config

매개변수	설명하다	유형	선택적 값	기본값
필드	모델 속성에 해당하는 양식 항목 필드	물체
필드.레이블	이름	끈
field.elTag	요소 양식 태그	끈	엘 입력/선택/라디오/캐스케이더/날짜 선택기/시간 선택기/업로드
field.elAttrs	양식 항목 속성(elTag 해당 컴포넌트 참조)	물체
field.elStyle	양식 항목 스타일 스타일	물체
필드.추가	프롬프트 메시지	끈
field.extraIcon	프롬프트 메시지 아이콘 아이콘	끈		el-아이콘-경고-개요
필드.규칙	양식 유효성 검사 규칙	정렬
필드.옵션	체크 시 선택은 데이터 표시로 사용됩니다.	정렬
필드.표시	연동, 모델에 따라 표시 및 숨김을 제어할 수 있습니다.	부울/문자열/함수({모델})
field.customRender	elTag 오른쪽에 표시되는 템플릿	끈
field.slotRender	elTag 내부 템플릿(예: 업로드 중인 콘텐츠)	끈

자세한 내용은 el-form-item 메소드를 참조하세요.

ElsaForm.field.elAttrs

일부 특수 속성의 예

매개변수	설명하다	유형
장애가 있는	장애를 입히다	함수({모델})/부울
isRemote	elTag는 el-select의 지연 로딩입니다.	부울
원격 메소드	elTag는 el-select의 지연 로딩입니다.	함수(완료,{모델}) / 부울
게으른	elTag는 el-cascader의 지연 로딩입니다.	부울
게으른로드	elTag는 el-cascader의 지연 로딩입니다.	함수(노드, 해결, { 완료 }) / 부울

ElsaForm.layout

매개변수	설명하다	유형	선택적 값
엘태그	요소 양식 태그	끈	엘 행/열
엘 속성	양식 항목 속성(elTag 해당 컴포넌트 참조)	물체
어린이들	어린이	물체
필드	양식 항목 필드	끈

ElsaForm.elProps

매개변수	설명하다	유형	선택적 값
라벨 너비	양식 필드 레이블의 너비	끈
라벨 접미사	양식 필드 레이블의 접미사	끈
크기	크기	끈	중형/소형/소형

자세한 내용은 el-form 속성을 참조하세요.

ElsaForm 메서드

매개변수	설명하다	유형
검증하다	양식 데이터 검증	기능(err,모델)
재설정필드	양식 항목 재설정	함수(props<배열 \| 문자열>)
클리어검증	검증 결과 지우기	함수(props<배열 \| 문자열>)