利用vue的render写的示例组件,同时支持outside-click

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40283784/article/details/87807646
{
                    title: 'Priority',
                    key: 'PV',
                    width: 90,
                    align:'left',
                    className:'column-head column-status',
                    render: (h, params) => {
                        const row = params.row;
                        const index = row._index
                        const _this = this
                        let manList=this.MANAGE.ppmListData;
                        let innerPriority;
                        if(row.hasOwnProperty("editPriority")&&row.editPriority){
                            this.editPriorityValue = row['Priority']
                            this.$nextTick(()=>{
                                if(this.$refs.editPriorityInput && this.$refs.editPriorityInput.focus){
                                    this.$refs.editPriorityInput.focus()
                                }
                            })
                            let creat = this.$createElement
                            innerPriority = creat('Input',{
                                props:{
                                    value: row['Priority'],
                                    autofocus: true,
                                    number: true
                                },
                                nativeOn: {
                                    click: (ev)=>{
                                        ev.stopPropagation();
                                    }
                                },
                                on:{
                                    "on-enter":()=>{
                                        this.clearEditPriority()
                                    },
                                    'input':(value)=>{
                                        this.EditPriorityFlag = true
                                        this.editPriorityValue = value
                                    },
                                    // 'on-blur':()=>{
                                    //     this.clearEditPriority()
                                    //     this.clearEditPriorityFlag = true
                                    // }
                                },
                                ref: 'editPriorityInput'
                            })
                        }else{
                            let manList=this.MANAGE.ppmListData;
                            this.$set(manList[index],"editPriority",false)
                             this.changeManageListData(manList);
                            innerPriority = h('div',{
                                style:{
                                    minWidth: '100px',
                                    minHeight: '20px'
                                },
                                on:{
                                    click:(ev) =>{
                                        ev.stopPropagation();
                                        this.clearEditPriority();
                                        this.$nextTick(()=>{
                                            let list = this.MANAGE.ppmListData;
                                            list[index].editPriority = true
                                            this.changeManageListData(list);
                                        })
                                    }
                                },
                                class: 'priority-move-wrapper'
                            },[
                                h('span',{
                                    class: 'priority-content'
                                },row['Priority']),
                                /* h('Icon',{
                                    props:{
                                        type: 'md-move',
                                        size: 16
                                    },
                                    style:{
                                        cursor: 'move'
                                    },
                                    class:{
                                        "drag-icon":true
                                    },
                                }) */
                            ])
                        }
                        return h('div', {
                            style:{
                                cursor: 'pointer',
                                padding: '0px',
                                "min-height":"48px",
                                "display":"flex",
                                "align-items":"center"
                            },
                            directives: [{
                                name: 'click-outside',
                                value: _this.clearEditPriority,
                            }]
                        },[
                            innerPriority
                        ]);
                        return h('div', {
                            style:{
                                minWidth: '160px',
                                cursor: 'pointer',
                                "min-height":"48px",
                                "display":"flex",
                                "align-items":"center"
                            }
                        },row['Priority']);
                    },
                    renderHeader:(h, params)=>{
                        const column = params.column;
                        const index = column._index
                        let ascSortBy = (this.DEV.developmentSortId == DEVELOPMENT.sortId[column.key])
                        let descSortBy = (this.DEV.developmentSortId == -DEVELOPMENT.sortId[column.key])
                        return h('div', {
                            style:{
                                cursor:"default",
                                margin:"0px 0px 0px 10px",
                                width:"100px",//test-width
                            },
                            on:{
                                click: ()=>{
                                    this.getSortTaskList(DEVELOPMENT.sortId[column.key])
                                }
                            }
                            },[h('div',{
                                style:{
                                    cursor:'pointer',
                                    'font-size':'14px'
                                },
                                class:'id-sort',
                            
                            },[
                                h('span',column.key),
                                h('i',{
                                    style:{
                                       
                                    },
                                    class:{
                                        'sort-icon': true,
                                        'fa':true,
                                        'fa-sort-up': !descSortBy,
                                        'fa-sort-desc': descSortBy,
                                        'active': ascSortBy || descSortBy
                                    }
                                })
                            ])]
                        );
                    }
                },

猜你喜欢

转载自blog.csdn.net/qq_40283784/article/details/87807646