iView中table表格中使用select选框和下拉菜单的方法

 首先是iview的表格中使用select选框

                    {
                        title: '适用区域',//纵列表头(类似于th)
                        width:140, //列表每一格的宽度
                        align: 'center', //ivew里面的写法,不用理会
                        key: 'region', //ivew里面的写法,不用理会
                        render: (h, params) => {
                            return h('Select', {
                                    on: {
                                        'onChange':(event) => {
                                            this.data[params.index].volumeTypes = event;
                                        }
                                    },
                                },
                                this.volumeTypes.map(function(type){//这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                                    return h('Option', {
                                        props:{
                                            value:type.value
                                        }
                                    }, type);
                                })
                            )
                        },
                    },

接着是在iview中的table表格中使用 下拉菜单的方法,其实大同小异

{
                        title: '品种',
                        width:100,
                        align: 'center',
                        key: 'varieties',
                        render: (h, params) => {
                            return h('Dropdown',{
                                props:{
                                    trigger:"click"
                                },
                                on:{
                                   'on-click':(value)=>{
                                       console.log(value);//value和下面选项的name对应
                                   }
                                } //iview组件内部的属性定义在其标签的对象里
                            }, [//盒子内部其他标签元素放入数组中
                                h('a',[//创建一个a标签,a标签里面又有元素,继续放入后面数组
                                    h('span','下拉'),//span中的内容
                                    h('Icon',{
                                        props: {
                                            type: 'md-arrow-dropdown',
                                            size:'18'
                                        }
                                    })
                                ]),
                                h('DropdownMenu',{//创建一个和a标签同级的标签
                                     slot:"list"//iview组件内部的属性定义在其标签的对象里
                                },
                                this.dropdownItems.map(function(type){//把map看作循环,type看作循环的每一项
                                    return h('DropdownItem',{
                                        props:{
                                            name:type.val
                                        }
                                    },type.val)
                                })
                                )
                            ]);
                        }
                    },

再来一个日期选择的rander函数

                        render: (h, params) => {
                            return h('div',[
                                h('DatePicker',{
                                    on:{
                                        'on-change':function(date){
                                            console.log(date);
                                        }
                                    }
                                })
                            ]);
                        }

rander函数改变内容:

render: function (createElement) {
    return createElement('span',this.row.checkStatus==0?"待审核":"审核通过")
},

 

最后一个,使用&&符号来做条件渲染

                        (params.row.state==="未审核") && h('Icon', {
                                    props: {
                                        type: 'md-checkmark-circle-outline',
                                        size:'18'
                                    },
                                    attrs:{
                                        title:'审核'
                                    },
                                    style: {
                                        cursor:'pointer',
                                        color:'#009688',
                                        fontSize:'22px'
                                    },
                                    on: {
                                        click: () => {
                                            this.readPhenophase = true;
                                            this.listData[params.index].state = "已审核"
                                        }
                                    }
                                }),

 

render函数接受一个函数并返回一个h函数,这个函数有两个参数,h和params;

我们可以简简单单的把h看作一个创建元素的方法,创建好这个元素之后,需要添加样式或者做其他(事件)操作,后面跟一个对象(里面是创建的元素的属性和方法)或者一个数组(该元素的子元素,非必须);而params就是具体的参数了!

下面举个简单的例子:

 render: (h, params) => {
                    return h('div',{//1.创建一个div
                        style: {//2.给这个div添加样式
                            'text-overflow': 'ellipsis',
                            width: '100%',
                            height:'100%',
                            overflow: 'hidden',
                            cursor: 'pointer'
                        },
                        on:{//3.给这个div添加事件
                            'click':()=>{
                                this.columns8.splice(this.columns8.length-1,1);
                                this.columns8.push(
                                    {
                                        'title': '农场总面积',
                                        'key': 'area',
                                        'minWidth': 120,
                                        'align': 'center'
                                    }
                                )
                            }
                        }
                    },[ h('span','展示更多')])//4.在div里面创建一个子元素,用来显示文字
                }

如果有用请花你2秒钟点个赞,谢谢~