Encapsulate the table component of element UI, and flexibly configure the header to realize the functions of table editing, button, link, etc.

vue-bxz-table

1. Encapsulate the table component of element UI:

  1. Define table height full screen
  2. Add foreground paging function.
  3. Customize the header and output the overall table structure in a circular way.
  4. In table editing (input box and drop-down selection box).
  5. Custom buttons and click events in the form.
  6. Add filter function for each column.
  7. Formable number
  8. You can check the checkbox in multiple pages, save or delete it at the same time, and keep the checkbox selected after switching pages.
  9. Automatically select the row after editing in the table.
  10. The parent component prints the checked lines.
  11. Custom sorting function, sorting by number size

2. Code cloud address: https://gitee.com/bxzxb/vue-b...

III. installation tutorial

  1. npm install,

IV. instructions

  1. npm run dev

V. Data Description:

1.data format:

 [
    {
      "bh": 1,
      "xmid": "5463562",
      "xmmc": "Test name",
      "Nsrsbh": "325423523542352345",
      "dwmc": "Name of testing unit",
      "yskze": "89787.66",
      "srze": "345345.35",
      "kcze": "56566.56",
      "zze": "345345",
      "zsfs_mc": "Calculation method 1",
      "xmxs": "Projects under construction"
    },
    {
      "bh": 1,
      "xmid": "5463562",
      "xmmc": "Test name",
      "Nsrsbh": "325423523542352345",
      "dwmc": "Name of testing unit",
      "yskze": "0.00",
      "srze": "345345.35",
      "kcze": "56566.56",
      "zze": "345345",
      "zsfs_mc": "Calculation method 1",
      "xmxs": "Projects under construction"
    }
 ]

2. Format of columns header array:

[
  {name:'',desc:'sel',width:'50',type:'selection'},
  {name:'number',desc:'',width:'60',type:'index'},
  {name:'Name',desc:'xmmc',tooltip:true},
  {name:'Calculated amount',desc:'yskze',width:'150',click:true,url:'/xmtz/xmtzYskje',templet:function(d){return d.yskze=='0.00'?true:false}},
  {name:'Calculate the price',desc:'srze',width:'150',click:true,sortable:true,url:'/xmtz/xmtzFwjsjk'},
  {name:'Tax calculation',desc:'kcze',width:'150',style:'text-align:right;'},
  {name:'Unique identification',desc:'xmid',format:true,width:'150',edit:true,editType:'input',},
  {name:'Calculation method',desc:'zsfs_mc',width:'150',edit:true,editType:'select',editSelOptions:[{label:'Calculation method 1',value:'Calculation method 1'},{label:'Calculation method 2',value:'Calculation method 2'}],style:'text-align:right;'},
  {name:'Calculated attribute',desc:'xmxs',width:'150',style:'color:#409EFF;text-align:center;text-decoration: underline;'},
  {name:'operation',desc:'jhqsnd',width:'200',btns:[{name:'View details',btnType:'primary',clickType:'showXq'},{name:'edit',btnType:'danger',clickType:'editXq'}]},
]

3. Column header parameter description

name: 'Header name',
desc: 'Field name',
width: 'Cell width',
click: 'Is the cell clickable',Trigger component binding function btnClickFunc,parameter{clickType:clickType,row:row}
url: 'Click to jump url'
sortable: 'Sortable or not',
format: 'Format amount',
fixed: 'Fixed column',
edit: 'Editable or not',
editType: 'Editing type',['inpput','select']
editSelOptions: 'When the editing type is select Initial data at'. 
style: 'Cell data style'
btns: 'Button in cell, multiple'. Trigger component binding function handleBtnClick,Parameters:{column:column,row:row,type:clickType}
     name: Button name, btnType:Button style, clickType:Button event ID.
templet: 'The judgment function of whether a cell can be clicked can be used for complex function judgment'. Parameter: data of this line row. 

Vi. component screenshot

Tags: Javascript Vue npm Attribute

Posted on Tue, 03 Dec 2019 22:36:43 -0500 by sandsquid