Getting to know Vxe table (I)

about vxe-table I won't talk about it here , Conventional usage is not too cumbersome , You should just press the document . Here are some ways to customize rendering

1、 Let's take a look at some customized effects

be familiar with Element Your friends may have found out , This table contains related components , such as ：
tooltip — Realized hover Bubble
el-link — Rendered table contents
el-dropdown — Implementation of drop-down menu
Finally, there is a rendering of empty data el-empty, At the same time, careful friends may also find , Sort There are also custom icons .

A small summary ：
We know , Contents of header 、 Cell contents 、 part Icon Can be customized , To fulfill our needs .

2、 How to achieve the above requirements ？

By looking at the documentation , We found that there are two ways to implement custom rendering ：
1、 slot Just follow vue Middle slot means
2、 Renderers It's like registering a vxe-table The components of

The way of slots is not discussed here , It should be understood that , Main demonstration Renderers The way .（ I recommend browsing first file , Personally, I prefer to see API That column , You can see which components you use props And other needs ）

3、 Take care of a simple one first — Implement an empty content renderer

Statement ： I used vxe-grid Components
Old rules , Look at the document

You can see , Can pass empty-text Direct delivery , It can also be done through Renderers , Then we must do it through the renderer （vxe Attribute with -render Usually the renderer ）

Renderer documentation

that , Copy first

//  In this way, a renderer is registered  name  by  NotData
VXETable.renderer.add('NotData', {
    
    //  Empty content template   This function is  vxe  fixed , The rendered table header is  renderHeader, Other departments look at documents 
    renderEmpty () {
    
     //  The return value type received by the renderer is  []vnode  therefore , Go back to 
      return [
        <el-empty description=" There is no data "></el-empty>
      ]
    }
})

//  Use   Directly through  props  Pass in 
data() {
    
       return {
    
           gridOptions: {
    
               ...
               emptyRender: {
    
                   name: 'NotData'
               }
        }
     }
}

You can find , In fact, this is the same as registering components , Someone might ask , How do I pass parameters or bind time ？ Let's render a Cell For example

4、 Render cells

As usual , Look at the document first

The above rendering empty content, we probably know the general format of the renderer ,xxx.add（name,option）, Ask us to provide a name , This name Namely prop Of the renderer parameters in name Options , meanwhile option Options have built-in rendering functions （ That is, the configuration parameters in the figure above ）

about Renderers ,vxe In fact, it has been fixed for you , For example, you want to render Empty content , You have to use it. empty-render , Want to render Cell The content of , You have to use it. cell-render… Take this advice seriously , Otherwise, it may be misused

in general , You have to know what kind of renderer you want to customize your rendering , Then go to the corresponding documents . For example, now we want to render cells , Then we have to see cell-render, Every render In fact, the functions provided are different , So it's best to look carefully

//  Simply explain   With cell-render For example 
renderHeader ----  You want to customize the header content of the rendered column 
renderDefault ---  Which column of cells do you want to customize to render , It's like we want to render the operation column now （ More operations ）, You have to use this to render cells 
...

 These render functions provide three parameters 
renderHeader (h, renderOpts, params: {
     column, columnIndex, columnIndex, $rowIndex, $table }) 

h ---  Should be similar vue render  Functional  h（ Let's see ）

renderOpts ---  Parameters passed during rendering （ The data you want to transmit 、 Events, etc. , Through this parameter ）

params ---  It should be seen from the documentation that , It is basically some information about the current column 

let me put it another way , When we go through Customize To render a cell , How can I give this cell Pass parameters ？ The binding event ？ How to get when the event responds Information at the forefront Well ？ The answer is through these render Function to get

5、 To render the operation column in the table

The writing of renderer ：

VXETable.renderer.add('Operation', {
    
	// Default ---  Default table cell contents 
    renderDefault(_, renderOpts, params) {
    
    	//  Directly from  renderOpts  Deconstruct the events we deliver 、 Parameters 、 Include ele Some custom events of the component 
        const {
     events,props: {
     option,command } } = renderOpts
        return [
            <div>
                <span class="editor-box pointer" onClick={
     ()=> events(params) } > edit </span>
                <span style="margin: 0 10px" > | </span>
                <el-dropdown placement="bottom" oncommand={
     (val) => {
     command(val,params.row) } } >
                    <span class="el-dropdown-link pointer" >
                         more 
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        {
    
                            option.map((item) => {
    
                                return (
                                    <el-dropdown-item command={
    item.id} >{
    item.text}</el-dropdown-item>
                                )
                            })
                        }
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        ]
    }
})

stay props in columns Property defines our renderer

// data
columns = [ 
            {
     field: 'operation', title: ' operation ', showOverflow: true ,fixed: 'right',width: 200,
                cellRender: {
    
                    name: 'Operation',
                    events: (e) => {
     this.onTabMoreEditor(e) },
                    props: {
    
                        option: [
                            {
    
                                id: 'a',
                                text: ' Delete '
                            },
                            {
    
                                id: 'b',
                                text: ' Lion's head '
                            },
                            {
    
                                id: 'c',
                                text: ' Snail powder '
                            }
                        ],
                        command: this.onTabCommand
                  }
             }
         }
    ]

methods: {
    
	/**  more - edit  **/
    onTabMoreEditor({
      row: {
      name } }) {
    
        console.log(name)
    },
    /**  more  **/  
    onTabCommand(val,row) {
    
        switch (val) {
    
            case 'a':
                console.log(' Current choice   Delete ')
                this.gridOptions1.data = this.gridOptions1.data.filter((item) => item.id != row.id)
                break;
            case 'b':
                console.log(' Current choice   Lion's head ')
                break;
            case 'c':
                console.log(' Current choice   Snail powder ')
                break;
            default:
                break;
        }
    }

}

As shown above , We have written the renderer , The events to be passed and the bound parameters can be provided by the renderer props and events Options are passed to the renderer component , And then complete the business functions

6、vxe-table mixin Usage of

When we need to write multiple renderers , Too lazy to pass VXETable.renderer.add Way to add one by one , Hence the mixin Usage of , Just follow vue Global registration components

const renderMap = {
    
	//  This way should be needless to say 
    MyLink: {
    
        renderDefault (h, renderOpts, params) {
    
            let {
     row, column } = params
            let {
     events } = renderOpts
            return [
                <el-link type="primary" onClick={
     () => events(params) } >
                    {
    row[column.property]}
                </el-link>
            ]
        }
    }
}
// mixin  Receive one  map  structure 
VXETable.renderer.mixin(renderMap)

7、 Personal summary

Renderers

• Used to customize the contents of the rendering table , Use renderer.add(name,option = {}) option It can be understood as like vue Component options for
• There are usually several renderings api
• renderDefault — The display content of the cell
• renderHeader — Table header renderer
• …
• These rendered api Most of them are three parameters
• h – Rendering function ( Not usually used )
• renderOpts – image cellRender Delivered on prop、event Equal parameter
• params – Table current row 、 Column data, etc (xxindex etc. )
• tips
• 1、 At the time of writing , You should first consider which renderer you belong to , Cell ？ Content ？ Empty data ？ etc.
• 2、 The return values of the renderer functions are []vnode type
• 3、 If the authored renderer does not display ( Not even executed and written correctly ) when , Consider whether and vxe The default configuration overlaps
• I'm writing SeqIcon I met , The default sequence number is always rendered , The reason is that columns In the configuration item , I wrote again type=seq So the default sequence number is rendered
• Difference between renderer and slot
• In fact, both have high degrees of freedom , Relatively speaking, the renderer is more in line with the idea of components , Better performance