美文网首页
用iview的render函数渲染可输入表格

用iview的render函数渲染可输入表格

作者: JiAyInNnNn | 来源:发表于2019-07-10 17:54 被阅读0次

本文参考是:https://run.iviewui.com/TB1hMmfe
首先我要完成这个页面:

1.png
当我点击添加按钮,就会出现表格一行
2.png
之前用饿了么ui比较多,相对简单。
然而iView这个框架有一个render函数(现在用的不熟,等熟悉了再介绍哈)
   <FormItem label="奖品设置">
                                   <Table ref="myTable" border :columns="columns" :data="prizesetData">
<!--                                        奖品名称-->
                                       <template slot="prizename" slot-scope="props">
                                           <Input v-model="props.row.prizename"></Input>
                                       </template>
<!--                                       奖品设置-->
                                       <template slot="prizeselect" slot-scope="props">
                                           <Select v-model="props.row.prizeselect" >
                                               <Option v-for="item in prizeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                           </Select>
                                       </template>
<!--                                       奖品信息-->
                                       <template slot="prizecontent" slot-scope="props">
                                           <Input v-model="props.row.prizecontent"></Input>
                                       </template>
<!--                                       奖品数量-->
                                       <template slot="prizecount" slot-scope="props">
                                           <InputNumber :max="100" :min="0" v-model="props.row.prizecount"></InputNumber>
                                       </template>
<!--                                       中奖概率-->
                                       <template slot="prizechance" slot-scope="props">
                                           <InputNumber :max="100" v-model="props.row.prizechance" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')"></InputNumber>
                                       </template>
<!--                                       奖品图片-->
                                       <template slot="prizeimg" slot-scope="props">
                                           <ImageUploader :currentList="props.row.prizeimg?[{'path':data.img}]:[]" type="image" @selectSource="getImgUrl($event)"></ImageUploader>
                                       </template>
                                       <template slot="prizechance" slot-scope="props">
                                           <InputNumber :max="100" v-model="props.row.prizechance" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')"></InputNumber>
                                       </template>
                                   </Table>

                                   <Button @click="addRow" style="margin:10px auto;">添加抽奖信息</Button>
                                   {{prizesetData}}  //这里是我渲染的数据,可以在页面上看到数据的变化
                               </FormItem>

利用插槽,在data中声明插槽的名字等数据(现在还不知道具体是啥,以后知道了会补充的)


 // 表格数据
                prizesetData:[
                    {
                        prizename:'积分',
                        prizeselect:'jifen',
                        prizecontent:'满100减100',
                        prizecount:'10',
                        prizechance:'50',
                    }
                ],
                //表格的表头
                columns:[
                    //序号
                    {
                        type: 'index',
                        width: 60,
                        title:'序号',
                        align: 'center'
                    },
                    {
                        title: '奖品名称',
                        key: 'prizename',
                        width: 100,
                        align: 'center',
                        render:(h,params) => {
                            return h('Input',{
                                props: {
                                    value:params.row.prizename,
                                    size:'small',
                                },
                                on: {
                                    input: (val) => {
                                        this.prizesetData[params.index].prizename = val
                                    }
                                },
                            })
                        }
                    },
                    {
                         title: '奖品设置',
                         key: 'prizeselect',
                         width: 100,
                         align: 'center',
                         render:(h,params) => {
                             let a = []
                             //表格里的奖品设置下拉框
                             let  prizeList =[
                                 {
                                     value: 'none',
                                     label: '无'
                                 },
                                 {
                                     value: 'youhuijuan',
                                     label: '优惠券'
                                 },
                                 {
                                     value: 'jifen',
                                     label: '积分'
                                 },
                             ]
                                 prizeList.forEach(item=>{
                                 a.push(h('Option',{
                                     props: {
                                         label:item.label,
                                         value:item.value
                                     }
                                 },item))
                             })
                             return h('Select',{

                                     props: {
                                         value:'',
                                         size:'small',
                                         },
                                 on: {
                                         input: (val) => {
                                                 this.prizesetData[params.index].prizeselect = val
                                             }
                                     },
                             },a)
                         }
                 },
                    {
                        title: '奖品信息',
                        key: 'prizecontent',
                        width: 100,
                        align: 'center',
                        render:(h,params) => {
                            return h('Input',{
                                props: {
                                    value:params.row.prizecontent,
                                    size:'small',
                                },
                                on: {
                                    input: (val) => {
                                        this.prizesetData[params.index].prizecontent = val
                                    }
                                },
                            })
                        }
                    },
                    {
                        title: '奖品数量',
                        key: 'prizecount',
                        render: (h, params) => {
                            return h('Input',{
                                props: {
                                    value:params.row.prizecount,
                                    size:'small',
                                },
                                on: {
                                    input: (val) => {
                                        this.prizesetData[params.index].prizecount = val
                                    }
                                },
                            })
                        }
                    },
                    {
                        title: '中奖概率%',
                        key: 'prizechance',
                        render: (h, params) => {
                            return h('Input',{
                                props: {
                                    value:params.row.prizechance,
                                    size:'small',
                                },
                                on: {
                                    input: (val) => {
                                        this.prizesetData[params.index].prizechance = val
                                    }
                                },
                            })
                        }
                    },
                    {
                        title: '奖品图片',
                        key: 'prizeimg',
                        render: (h, params) => {
                            return h('Input',{
                                props: {
                                    value:params.row.prizechance,
                                    size:'small',
                                },
                                on: {
                                    input: (val) => {
                                        this.prizesetData[params.index].prizechance = val
                                    }
                                },
                            })
                        }
                    },
                    {
                        title: '操作', width: 80,key: 'action',
                        render: (h, params) => {
                            return h('div', {}, [
                                h('span', {
                                    style: {
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            if (!this.disabled) {
                                                this.deleteCredit(params.row._index)
                                            }
                                        }
                                    },
                                    class: 'es-primary-text es-text',
                                }, '删除')
                            ])
                        }
                    }
                ],

相关文章

网友评论

      本文标题:用iview的render函数渲染可输入表格

      本文链接:https://www.haomeiwen.com/subject/lawckctx.html