本文参考是：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',
}, '删除')
])
}
}
],
网友评论