iveiw table可编辑单元格

columns:[
	{
	    title: '完成情况',
	    key: 'reports',
	    render: (h, params) => {
	    let content = params.row.content;
	      if (params.row.$isEdit5) {
            return [
                 h('Input', {
                     props:{
                         type:'textarea',
                         value:content,
                         autofocus: true,
                     },
                     class: 'myrenderChange5',
                     on:{
                         input:(event)=>{
                             //this.reportContent = event;
                         }
                     }

                 }),
                 h('Button',{
                     props:{
                         size:'small',
                         type:'primary',
                     },
                     class:'mini-button',
                     on:{
                         click: ()=>{
                         }
                     }
                 },'保存'),
             
                 h('Button',{
                     props:{
                         size:'small',
                     },
                     class:'mini-button  margin-left-10',
                     on:{
                         click: ()=>{
                             this.onblurs(params.row, '$isEdit5', '.myrenderChange5')
                         }
                     }
                 },'取消')
             ]

         } else {
             return h('div', {
                 style:{
                     minHeight:'30px',
                     cursor:'pointer'
                 },
                 class:'task-cell',
                 on: {
                     click: () => {
                         this.handleEdit(params.row, '$isEdit5', '.myrenderChange5')
                     }
                 }
             }, content)
         }
	    }

	},
]

//可编辑单元格
handleEdit (row, isEdit, className) {
     this.$set(row, isEdit, true)
     this.$nextTick(() => { // 下一次渲染时，获取焦点
         setTimeout(() => { // 做一个延迟获取焦点
             document.querySelector(className).focus()
         }, 10)
     })
 },
 // 可编辑单元格失去焦点
 onblurs (row,isEdit, className) { 
     this.$set(row, isEdit, false)
 },

效果

默认状态不可编辑

点击可编辑