avl-components使用教程

時間 2019-11-08

標籤 avl components 使用教程简体版

原文原文鏈接

avl-components

avl 項目前端通用組件提取（基於 vue+element）

組件引用方法

經過 npm 安裝css

npm install avl-components -D
複製代碼

在 vue 項目 main.js 裏面引入(目前沒有作按需加載默認全局引入)前端

import AvlComponents from "avl-components";
import "avl-components/lib/avl-components.css";
Vue.use(AvlComponents);
複製代碼

下面是具體組件使用方法

1.avl-table（表格組件）

全局引入以後默認註冊了 vue 全局組件使用以下vue

下面是一個自定義表頭和列內容的使用例子
 <avl-table
 ref="avlTable"
 :tableConfig="tableConfig"
 :requestFun="requestFun"
 :requestParamsOrData="requestParamsOrData" @onHandleSizeChange="onHandleSizeChange"
 @onHandleCurrentChange="onHandleCurrentChange" @onHandleSelectionChange="onHandleSelectionChange"
 @onOperateBtn="onHandleOperateBtn"
 @onHandleSortChange="onHandleSortChange"
 @onRowClick="onHandleRowClick"
 >

 <!-- 狀態自定義表頭 -->
           這裏的slot  須要和配置項定義的一致
            <template slot="stateHeader">
              <el-dropdown @command="handleFilterTag">
                <span class="el-dropdown-link">
                  狀態
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="all">所有</el-dropdown-item>
                  <el-dropdown-item command="1">進行中</el-dropdown-item>
                  <el-dropdown-item command="2">已完成</el-dropdown-item>
                  <el-dropdown-item command="3">已失敗</el-dropdown-item>
                  <el-dropdown-item command="0">未檢測</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <!-- 狀態自定義列內容 -->
             這裏的slot  須要和配置項定義的一致
            <template slot-scope="props" slot="analysisStatus">
              <div v-if="props.scope.row.analysisStatus=== 1">
                <el-tag>進行中</el-tag>
              </div>
              <el-tag v-else-if="props.scope.row.analysisStatus=== 3" type="danger">已失敗</el-tag>
              <el-tag v-else-if="props.scope.row.analysisStatus=== 0" type="danger">未檢測</el-tag>
              <el-tag v-else type="success">已完成</el-tag>
            </template>
            <!-- 也能夠自定義操做列  這裏的slot會覆蓋下面的操做列配置項 -->
             <template slot-scope="props" slot="operation">
             xxx
             </template>
</avl-table>

下面是事件監聽
   // 操做按鈕事件監聽
    onHandleOperateBtn(val) {
      console.log(val);
    },
    // 分頁切換
    onHandleCurrentChange(val) {
      console.log(val);
    },
    onHandleSizeChange(val) {
       console.log(val);
    },
    // 表格排序監聽
    onHandleSortChange(val) {
     console.log(val);
    },
    // 多選按鈕操做監聽
    onHandleSelectionChange(val) {
     console.log(val);
    },
    //行點擊事件
   onHandleRowClick(val){
     console.log(val);
   }
複製代碼

一個完整的配置例子以下npm

建議本身新建一個相關表格的配置文件並引入例如 pageConfig.js數組

export const tableConfig = {
  hasSelect: true, // 有無選中列
  hasOperation: true, // 有無操做列
  border: false, // 是否帶有縱向邊框 默認爲false
  hasExpand: false, // 有無展開行功能 默認爲false
  rowClick: false, //是否開啓行點擊 默認爲false
  expands: [],開啓行展開以後的數據
  columns: [  //自定義列 是一個數組 數組每一項表明一列
    {
      id: "1",  //惟一標識
      label: "狀態",  //列名
      prop: "analysisStatus",  //列對應的後臺字段名 和自定義列slot對應
      width: "320",  //列寬
      className: "", //只自定義class類
      minWidth: "100", //最小寬度
      show: "template",  //true 表明不作任何處理 false表明隱藏 template表明自定義模板
      sortable: "custom",  //排序統一採用後臺控制 custom表明後臺排序  默認不排序
      formatData: formatAddTime,  //表明數據格式化 相似於filter過濾器功能  默認爲null
      showHeader: true,  //表明是否自定義表頭  默認爲false
      headerProp: "stateHeader"  //自定義表頭slot  name值 須要showHeader配置爲true
    }
  ],
  operation: {
    // 操做功能
    label: "操做", // 操做列的表頭文字
    width: "200", // 操做列的寬度
    className: "", // 操做列的class名
    data: [
      // 操做列數據
      {
        id: 1, // 按鈕循環組件的key值
        label: "保存", // 按鈕文字
        Fun: "handleSubmit", // 點擊按鈕後觸發的父組件事件
        size: "mini", // 按鈕大小
        classname: "", // 按鈕的類名
        type: "success" //可選的有primary / success / warning / danger / info / text
      }
    ]
  },
    //  搜索參數表明是什麼形式傳給後臺  默認是params  可是post請求下能夠配置data
  searchProp: {
    //   name:'data'
  },
  //  格式化數據必定要返回一個對象  表明數據和數量
  formatTableData: ({data}) => {
    return {
      data: data.apkAnalysis,
      totalCount: data.counts
    };
  }
};
// 列表請求配置 返回一個promise
export const requestFun = ({params,data})=>{
   return request({
     method: "get",
     url: "/apkAnalysis",
     params,
     data
   });
}
// 列表請求查詢參數
export const requestParamsOrData = {
  page: 1,
  pageSize: 10
};
複製代碼

avl-table 使用注意事項 1.自定義列內容使用時默認數據 slot-scope="props" 使用方法爲 props.scope.row.xxpromise

2.avl-form（表單組件）

下面是一個自定義表單的使用例子
  <avl-form @handleEventChange="onHandleEventChange" :formConfig="formConfig">
 </avl-form>

下面是事件監聽
   // 表單變化事件監聽
    onHandleEventChange(val) {
      console.log(val);
    },

複製代碼

一個完整的配置例子以下bash

// 搜索表單配置
export const formConfig = [
         {
           id: 1,  //惟一標識
           propName: "address1", //字段名
           className: "", //  自定義class樣式
           type: "avl-radio", //  標識屬於哪一種form組件 avl-radio
           avl-checkbox avl-input avl-select avl-cascader avl-switch
           size: "small", //  大小
           defaultValue: "beijing", //  默認值string
           //  默認的選擇項
           defaultOptions: [
             {
               label: "北京",
               value: "beijing"
             },
             {
               label: "上海",
               value: "shanghai"
             },
             {
               label: "武漢",
               value: "wuhan"
             }
           ],
           showBtnStyle: true // 是否爲按鈕樣式
           //  按鈕樣式下自定義樣式(默認自帶樣式)
           // btnStyle: {
           //   textColor: "#fff",
           //   fill: "#409E"
           // },

           //  showBorder: true     //  是否顯示邊框
         },
         {
           id: 2,
           propName: "address2",
           className: "", //  自定義class樣式
           type: "avl-checkbox", //  標識屬於哪一種form組件
           size: "small", //  大小  medium / small / mini
           defaultValue: ["beijing"], //  默認值array
           //  默認的選擇項
           defaultOptions: [
             {
               label: "北京",
               value: "beijing"
             },
             {
               label: "上海",
               value: "shanghai"
             },
             {
               label: "武漢",
               value: "wuhan"
             }
           ],
           // showBtnStyle: true   // 是否爲按鈕樣式
           //  按鈕樣式下自定義樣式(默認自帶樣式)
           //  btnStyle: {
           //    textColor: "#fff",
           //    fill: "#409EFF"
           //  },
           //  showBorder: true //  是否顯示邊框
           //  可勾選的最小與最大值
          //  min:1,
          //  max:2
         },
         {
           id: 3,
           propName: "search",
           className: "", //  自定義class樣式
           type: "avl-input", //  標識屬於哪一種form組件
           size: "small", //  大小
           defaultValue: "", //  默認值string
           placeholder: "請輸入內容", //  默認的提示語
           //  clearable: true,
          //  showWordLimit: true,  // 是否顯示輸入字數統計
           // 最小與最大值
           // minlength: 0,
           // maxlength: 10
         },
         {
           id: 4,
           propName: "address3",
           className: "", //  自定義class樣式
           type: "avl-select", //  標識屬於哪一種form組件
           size: "small", //  大小
           defaultValue: "beijing", //  默認值
           //  默認的選擇項
           defaultOptions: [],
           //  獲取數據的方式(請求遠程數據舉例)
            getInitData() {
              if (!localStorage.getItem("defaultOptions1")) {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    const defaultOptions = [
                      {
                        label: "北京",
                        value: "beijing"
                      },
                      {
                        label: "上海",
                        value: "shanghai"
                      },
                      {
                        label: "武漢",
                        value: "wuhan"
                      }
                    ];
                    resolve(defaultOptions);
                  }, 2000);
                });
              } else {
                return JSON.parse(localStorage.getItem("defaultOptions1"));
              }
            },
           //  clearable: true,  //  是否顯示清除按鈕
          //  multiple: true,   //  多選
           //  multipleLimit:0,   //  多選限制 0表明無限制
          //  collapseTags:true,  //  多選展現摺疊
          //  filterable: true,  // 支持過濾
           //  filterMethod:null   //  自定義過濾方式 能夠配合遠程過濾
         },
         {
           id: 5,
           propName: "test",
           className: "", //  自定義class樣式
           type: "avl-cascader", //  標識屬於哪一種form組件
           size: "small", //  大小
           defaultValue: "", //  默認值
           defaultOptions: [], //  默認的選擇項
           //  獲取數據的方式(請求遠程數據)
           getInitData() {
             return [];
           },
            // showLastLevel: true, //  只展現最後一級名稱
           //  collapseTags:true,  //   多選展現摺疊
           //  separator:'/',  //  選項分隔符
           props: {
              // expandTrigger: "hover", //  次級菜單的展開方式 hover
             //  multiple: true, //是否多選
             //  checkStrictly: true, //是否嚴格的遵照父子節點不互相關聯
             //  lazy: false, //是否動態加載子節點，需與 lazyLoad 方法結合使用
             //  lazyLoad: null, //加載動態數據的方法，僅在 lazy 爲 true 時有效
             //  value: "value",
             //  label: "label",
             //  children: "children",
             //  disabled: "disabled",
             //  leaf: "leaf"
           }
           //  clearable: true,  //  是否顯示清除按鈕
           //  filterable: true,   // 支持過濾
           //  filterMethod:null  //  自定義過濾方式 能夠配合遠程過濾
         },
         {
           id: 6,
           propName: "test1",
           className: "", //  自定義class樣式
           type: "avl-switch", //  標識屬於哪一種form組件
           size: "small", //  大小
           defaultValue: true, //  默認值
           config: {
             "active-text": "按月付費",
             "inactive-text": "按年付費",
             //  "active-value":true,  //打開的值
             //  "inactive-value":false, //關閉的值
             "active-color": "#13ce66",
             "inactive-color": "#ff4949"
           }
           // disabled: true, //禁用
           // width:40,  //寬度
         }
       ];

複製代碼

avl-form 使用注意事項 1.數據源須要後臺請求時能夠參照 avl-select 配置post

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。