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

柔情只为你懂 2022-03-02 13:48 758阅读 0赞

##### 普通模式 #####

{
         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);
    			})
    	    )
    	}
    },