Render function advanced: implement data loop, or display dropdown box

Problem Description:

• Using the Table component of iView, the data returned in the background is an array, which needs to display the name value in the array in the Table

• Form inside generate dropdown box, and display dropdown box data

1. The table data gets an array and needs to be displayed in the table

• Arrayparams.row. product (); / / arrayParams.row. product (); / / arrayParams.row

Console. log(params.row.product) // [{name: console.log(params.row.product) // [{name:'book'}, {name: 'computer'}, {name: 'cup'}]
Copy the code

{
    title: 'products',
    key: 'product',
    render: (h, params) => {
      params.row.product.forEach(el => {
        console.log(el.name)
        return h('div',
          {
            domProps: {
              innerHTML: el.name
            }
          })
      })
    }
  }
Copy the code

• It turned out that the idea was wrong, that the array should be looped as the second item, and that map should be used instead of forEach

{
    title: 'products',
    key: 'product',
    render: (h, params) => {
      console.log(params.row.product) // [{name: 'book'}, {name: 'computer'}, {name: 'cup'}]
      return h('div', params.row.product. Map (v => {// traverses the background params.row.productreturn h('div',
            {
              domProps: {
                innerHTML: v.name
              }
            })
        })
      )
    }
}
Copy the code

• Display renderings
  

  

2, if you need to write a pull box in the render function

{
    title: 'products',
    key: 'product',
    render: (h, params) => {
      return h('Select', {
        props: {
          value: wwwww,
          size: 'small'},}, [optionList.map((val) => {// The contents of the dropdown box,optionList dropdown box datareturn h('Option', {
            props: {
              value: val,
              label: id
            }
          })
        })
      ])
    }
}

Copy the code

• Display renderings

Remark:

• If you have any questions, please point out
• This article is originally published. If reprinted, please indicate the source: Render function advanced: implement data loop, or display dropdown box