Render函式進階: 實現資料迴圈, 或者顯示下拉框

問題描述:

• 使用iview的Table元件裡面,後臺返回的資料是個陣列,需要把這個陣列裡的name值顯示在表格裡面

• 表格裡面生成下拉框,並顯示下拉框資料

1, 表格資料拿到的是一個陣列,需要顯示在表格裡面

• 本來寫了個forEach直接迴圈後臺返回的陣列params.row.product,結果拿不到資料

後臺返回的資料: console.log(params.row.product)
// [{name: '書'}, {name: '電腦'}, {name: '杯子'}]
複製程式碼

{
    title: '產品',
    key: 'product',
    render: (h, params) => {
      params.row.product.forEach(el => {
        console.log(el.name)
        return h('div',
          {
            domProps: {
              innerHTML: el.name
            }
          })
      })
    }
  }
複製程式碼

• 後來發現想法不對,陣列應該作為第二項來迴圈,並且需要用到map而不是forEach

{
    title: '產品',
    key: 'product',
    render: (h, params) => {
      console.log(params.row.product) // [{name: '書'}, {name: '電腦'}, {name: '杯子'}]
      return h('div', params.row.product.map(v => { // 遍歷後臺params.row.product
         return h('div',
            {
              domProps: {
                innerHTML: v.name
              }
            })
        })
      )
    }
}
複製程式碼

• 顯示效果圖

  

2,如果需要在render函式裡面寫下拉框

{
    title: '產品',
    key: 'product',
    render: (h, params) => {
      return h('Select', {
        props: {
          value: wwwww,
          size: 'small'
        },
      }, [
        optionList.map((val) => { // 下拉框裡的內容,optionList下拉框資料
          return h('Option', {
            props: {
              value: val,
              label: id
            }
          })
        })
      ])
    }
}

複製程式碼

• 顯示效果圖

備註:

• 如有問題,歡迎指正
• 本文為原創,如需轉載請註明出處: Render函式進階: 實現資料迴圈, 或者顯示下拉框