vue- render函数

227 阅读1分钟

render函数渲染,展示后台返回数据对应的值

  {
                    label: "是否满意",
                    align: "center",
                    minwidth: "120",
                    render:(h,params)=>{
                      let name = params.row.sure == 0 ?
                      '不满意' : '满意'
                            return h('span',{},
                            name
                            )
                        }
                },
                
               //是否的判断一般直接用返回值为true或者false判断即可

如果是多判断的

 {
                    label: "是否满意",
                    align: "center",
                    minwidth: "120",
                    render:(h,params)=>{
                            let obj = {
                                0: '非常满意',
                                2: '满意',
                                3: '一般',
                                4: '不满意'
                            }
                            let name = params.row.sure ? obj[params.row.sure] : '-'
                            return h('span',{},
                            name
                            )
                    }
                },
                
                
                //params.row.sure 当前行参数为sure的返回值,判断显示的文字是什么。
                
                
                
                
### render函数map遍历形式举例


```js
 render:(h,params)=>{
            return (
                        <div class="tag__wrap">
                            {['标签1','标签2','标签3','标签4'].map((item, index) => {
                            return         <el-tag   style=" margin-left:5px;margin-right:5px;display:inline-block" key={index}  type="success"
                                size="small"
                                effect="dark">{item}</el-tag>
                            })} 
                        </div>
                ) }
                    
 // 如果列表中展示一些标签。按照返回的数据有几个展示几个。 采用render函数可以通过此方式书写。 用map 遍历。