It’s been a long time since I wrote an article. I don’t know where the time has gone. I once wrote an article about the component of Element table and form, but the component I wrote at that time might not be so comprehensive, and some parts were not considered properly. So I rearranged it in recent days, and then sent a new NPM package. Interested partners can go to Github or NPM to read the source code. I only recommend installing version 1.1.1 (which only has these three components). In the future, I will use this UI as a component library to update some of the components I have written. Updated in version 6.1, some bugs are fixed, some component parameters are added, and the range of components is improved

The installation

CNPM install [email protected] -s // 1.1.1 CNPM install elme-ui-s is recommendedCopy the code

reference

Global registration: import ElmeUi from in main.js'elme-ui'Vue. Use (ElmeUi) eg: WHAT I write now can only be installed globally, and I will optimize it laterCopy the code

use

Now contains the form components (including input, select, textarea, checkbox, radio, time and citypicker, image, password) menu component (support infinite pole, icon) table components (integrated axios, Pagenation)Copy the code

The form components:

It accepts 5 parameters: reform (the ref attribute of the elform), labelWidth (the label width), labelPosition (the label position), reformRule (the form validation rule), and formData (the formData). This parameter is mandatory. All others have default values)

// The ref attribute on the elform can be this.$refs[reform] to do something differenttype: String,
      default: function() {
        return "alform"; }}, // label width: {type: String,
      default: function() {
        return "110px"; }, // Label position labelPosition: {type: String,
      default: function() {
        return "right"; }}, // Verification rule: Like element, all fields with verification rules are mandatory. ReformRule: {type: Object,
      default: function() {
        return{}; }}, // formData: {type: Array,
      default: function() {
        return [
          {
            name: "Input field"// Text labeltype: "input", / / input, select, textarea, checkbox, radio, time and citypicker, image, password maxlength: 30, / / input length limit hide:false// Whether to display field:"id"// select * from isshow;false// display width:false, // Text width value:' '// This property is disabled after 1.0.5.false, // whether placeholder is disabled:"Please enter", // placeholder hint multiple:falseCheckbox filterable:false// Whether to select multiple options based on select options:[//typeFor the select, checkbox, radio {label:'options',// The text description of the option value:'0'}] ajax: {select, checkbox,radio method:"get"// Request type url:"www.xx.cn"// Interface address data: {}, // request parameter label:"label", // Drop down the selection box selection text value:"value", // Drop down the selected value callback:function(data) {// The interface returns data hierarchy processingreturndata; }}}]; }}Copy the code

Page use:


<elmeForm :formData="formData" ref="reform" labelWidth="90px" v-model="formValue"></elmeForm> <! --js--> formValue:{ id:' '// This property is the same as the field value in formData. The default value is null, i.e. the form value is null. -- When you submit a form -->let validate = this.$refs.reform.submitForm(); If your form does not validate, validate isfalse, bytrue

Copy the code

The menu component:

It accepts parameters such as menuList (which contains the hierarchy of the menu), excludeList (which excludes highlighted routers), onlyOne (whether to expand onlyOne), textColor (the textColor of the menu (hex only)), BackgroundColor (backgroundColor of the menu), activeColor (text color of the current active menu)


menuList: {
  type: Array,
  default: function() {
    return [
      {
        img: require('.. /.. /assets/images/workbench.png'// the image path is referenced by require, icon or img is a binary icon:'icon-peizhi'// Ali's iconfont, icon and img are two choices, index:"workbench"// routing address show:true// Whether to display title:"Workbench"// Menu title children:[// Submenu can be nested indefinitely {icon:'Blah blah blah',
            index: "Blah blah blah.",
            show: true,
            title: "Blah blah blah.", children:[] } ] } ]; }}, // excludeList excludeList is normally used when you would like to bypass your secondary page and it is currently excludeList of the parent page :{type: Array,
  default: function() {
    return [];
  }
  // eg:['member'}, // expand onlyOne onlyOne: {type: Boolean,
  default: function() {
    return false; }}, // menu textColor (hex format only) textColor: {type: String,
  default: function() {
    return "# 303133"; }, // menu backgroundColor (hex format only) backgroundColor: {type: String,
  default: function() {
    return "#ffffff"; }}, // activeColor: {type: String,
  default: function() {
    return "#409EFF"; }}Copy the code

When used on the page:

    <elme-menu :menuList="menuList"></elme-menu> <! --> < div style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

The table component:

Here we are at the table component, which accepts six parameters: Refresh (table refresh), border (table border), paginationJson (table paging configuration), tableSerach (table search criteria), tableAjax (tableAjax requests), tableData (table parameter configuration)

// Table refresh, recommend to pass time stamp, because each time listen to this value is different, table refresh:""// table border: {type: Boolean,
  default: function() {
    return true; }}, // paging configuration paginationJson: {type: Object,
  default: function() {
    return{pageSize: [10, 20, 50, 100],// how many lines per page pageAlign:"right",// align ispagination:true// Whether to display paging layout:"total, sizes,jumper, prev, pager, next"// Paging layout}; }}, // tableSerach: {}, // tableAjax request configuration tableAjax: {type: Object,
  default: function() {
    return {
      url: ""// request address method:"post"// Request mode, currently only support post data mode to submit data, get params mode pageKey:'pageNum'// Field compatible handling, page number field name sizeKey:'pageSize'Data: {pageNum: 1, pageSize: 15}, callback:function(data) { //<! --a callback after an AXIos request to handle various levels and different fields -->return{ tData:data.list total:data.total }; }}; }}, // tableData: {type: Object,
  default: function() {
    return{// tHead: [{name:"Account"// Table header field:"id"// Select * from noData;"--"// No data compatible processingtype: "function",// Currently supportedfunction(field manipulation), image (image type), btnList (horizontal button), selectBtns (drop-down button) width:'250px',// do not write for adaptive width isHide:false// whether to hide align:'center'// align callback:function(cell, rowData) {/ / typefunction// If btnList,selectBtns, thenreturnBecause of the array: //let arr = [
                //    {
                //      type: "reset"// Type of click to distinguish different button click // label:Reset '< span > < / span >'/ / / /}];returnCell}}], // Configure whether to display multiple box isMultiple:false// Configure whether to display sort isRank:true}; }}Copy the code

In addition to these six parameters, the table component also has a click event,

TableClick (obj) {console.log(obj)//obj.rowData is the data for this rowif (obj.type === "reset") {// This is the reset type click event // do some interaction and add, delete, change, check}}Copy the code

Use on the page:


<elme-table
  :tableSerach="tableSerach"
  :refresh="refresh"
  :tableData="tableData"
  :tableAjax="tableAjax"
  @tableClick="tableClick"
></elme-table>

Copy the code

After the introduction, please give me a thumbs up, ha ha ha