iview中在table组件中添加select(以及不成功的问题处理)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_21891743/article/details/88693261
普通模式
{
     title: '午饭选择',
     key: 'lunch',
     width: 200,
     align: 'center',
     render: (h, params) => {
         return h('Select', {
                 props:{
                     value : 1, //默认的值
                     transfer: true,  //select不受body显示,以免显示不出来
                 },
                 on: {
                     'on-change':(val) => { //选项改变发生的事件
                         console.log(val)
                     }
                 },
             },
             [
                 h('Option',{
                     props: {
                         value: '1'
                     }
                 },'黄焖鸡'),
                 h('Option',{
                     props: {
                         value: '2'
                     }
                 },'大排饭'),
                 h('Option',{
                     props: {
                         value: '3'
                     }
                 },'牛肉汤'),
                 h('Option',{
                     props: {
                         value: '4'
                     }
                 },'炒菜')
             ]
         );
     }
 },
数据填充模式
{
	title: '午餐选择',
	key: 'lunch',
	width: 200,
	align: 'center',
	render: (h, params) => {
	    return h('Select', {
			    props:{
					value : this.data[params.index].lunch,  //数据的双向绑定 data是定义好的数据
					transfer: true,
			    },
			    on: {
					'on-change':(event) => { //select改变事件
					    this.data[params.index].lunch = event;
					}
			    },
			},
			this.lunch_array.map(function(val,key){ //lunch_array是午餐的集合数组
			    return h('Option', {
					props:{
					    value:val.value
					}
			    }, val.text);
			})
	    )
	}
},

猜你喜欢

转载自blog.csdn.net/qq_21891743/article/details/88693261
今日推荐