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函数进阶: 实现数据循环, 或者显示下拉框