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 )

特徴

その他のカード
- メインと字幕の設定をサポート
その他のテーブル
- 構成可能なリスト列
- ページング制御をサポート
- ツリー状のデータ表示と遅延読み込みをサポート
エルサフォーム
- サポートされているフォームコンポーネント
  - エル入力
  - エルラジオ
  - エルチェックボックス
  - エルセレクト
  - エルアップロード
  - el-xxx-ピッカー
- カスタムレイアウト
- フォームチェックサムのリセット
- ネストされたオブジェクトの解析
- フォーム全体の無効設定
- フォーム項目のヒント情報
- フォーム項目: 動的/リンク
  - 無効/有効
  - 表示/非表示
  - 複数のオプションを動的に変更する

エルザテーブル

使用法：

配列型のデータソース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

パラメータ	説明する	タイプ	オプションの値	デフォルト値
~~データ~~	データソースに置き換えます
国境	垂直境界線を付けるかどうか	ブール値		間違い
サイズ	サイズ	弦	中型/小型/ミニ
フィット	列の幅が自立するかどうか	ブール値		真実

詳細については、「el-table 属性」を参照してください。

エルサテーブルイベント

パラメータ	説明する	タイプ	オプションの値	デフォルト値
選択変更	このイベントは、選択が変更されたときにトリガーされます	機能(選択)

詳細については、「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

パラメータ	説明する	タイプ	オプションの値	デフォルト値
分野	モデル属性に対応するフォーム項目フィールド	物体
フィールド.ラベル	名前	弦
フィールド.elTag	要素フォームタグ	弦	el-input/select/radio/cascader/date-picker/time-picker/upload
field.elAttrs	フォーム項目の属性 (elTag 対応コンポーネントを参照)	物体
フィールド.elStyle	フォーム項目のスタイルスタイル	物体
フィールド.エクストラ	プロンプトメッセージ	弦
フィールド.extraIcon	プロンプトメッセージアイコンアイコン	弦		el-アイコン-警告-アウトライン
フィールド.ルール	フォーム検証ルール	配列
フィールド.オプション	チェックを入れるとデータ表示として使用します	配列
フィールド.可視	連携により、機種に応じて表示・非表示を制御可能[filed]	ブール値/文字列/関数({モデル})
フィールド.customRender	elTagの右側に表示されるテンプレート	弦
フィールド.スロットレンダリング	elTag 内のテンプレート (例: アップロード内のコンテンツ)	弦

詳細については、「el-form-item メソッド」を参照してください。

ElsaForm.field.elAttrs

いくつかの特殊なプロパティの例

パラメータ	説明する	タイプ
無効	無効にする	関数({モデル})/ブール値
リモートです	elTag は el-select の遅延読み込みです	ブール値
リモートメソッド	elTag は el-select の遅延読み込みです	Function(done,{model}) / ブール値
怠け者	elTag は el-cascader の遅延読み込みです	ブール値
遅延ロード	elTag は el-cascader の遅延読み込みです	関数(ノード、解決、{完了}) / ブール値

ElsaForm.layout

パラメータ	説明する	タイプ	オプションの値
エルタグ	要素フォームタグ	弦	エル行/列
elAttrs	フォーム項目の属性 (elTag 対応コンポーネントを参照)	物体
子供たち	子供	物体
分野	フォーム項目フィールド	弦

ElsaForm.elProps

パラメータ	説明する	タイプ	オプションの値
ラベル幅	フォームフィールドのラベルの幅	弦
ラベル接尾辞	フォームフィールドラベルの接尾辞	弦
サイズ	サイズ	弦	中型/小型/ミニ

詳細については、「el-form 属性」を参照してください。

ElsaForm メソッド

パラメータ	説明する	タイプ
検証する	フォームデータの検証	関数(エラー、モデル)
リセットフィールド	フォーム項目をリセット	関数(props<配列 \| 文字列>)
クリア検証	明確な検証結果	関数(props<配列 \| 文字列>)