iview table tree可编辑指定列

先上效果图：

需求：
1、表格里放tree
2、Formula列 可编辑 下拉框
3、Min、Max 可编辑 数字输入框
4、有且仅有一个编辑框显示在界面上

实现：
1、表格

<Table row-key="id" :colunms="colunms" :data="tableData" border @on-expand-tree="onexpandtree"></Table>

2、初始化参数

data(){
	return{
		formulaList:[{
			id:0,
			name:'None'
		},{
			id:1,
			name:'Kx+b'
		},{
			id:2,
			name:'Callout'
		}],
		selectedCell:{
			columnIndex:'',
			rowIndex:''
		}
	}
}

3、表格列 关键列字段
关键代码： this.selectedCell.rowIndex === params.row.id && this.selectedCell.columnIndex === params.column.key

columns:[{
	type:'selection',
	width:60,
	align:'center'
},{
	title:"Formula",
	key:'formula',
	render:(h,params) => {
		if(this.selectedCell.rowIndex === params.row.id && this.selectedCell.columnIndex === params.column.key){
			return h('Select', {
				props:{
					value:params.row.formula ===null ? '' :params.row.formula,
					transfer: true
				},
				on:{
					'on-change':event => {
						params.row.formula = event;
						this.$nextTick(() => {
							this.clearInput();
						});
					}
				}
			},
			this.formulaList.map(function(item){
				return h('Option', {
					props:{
						value:item.name
					}
				},item.name)
			}))
		}else {
			return h('div',{
				style:{ cursor: 'pointer'},
				on:{
					click:() => {
						this.selectedCell.rowIndex = params.row.id;
						this.selectedCell.columnIndex = params.column.key;
					}
				}
			},params.row.formula == null || params.row.formula === '' ? '' : params.row.formula);
		}
	}
}]

4、data的数据结构

tableDate:[{
	id:'1',
	formula:'',
	_showChildren :true,
	children:[{
		id:'2',
		formula:'',
		_showChildren :true,
		children:[{
			id:'3'，
			formula:'Kx+b'
		}]
	}]
}]

5、关闭select框的方法

methods:{
	clearInput:function(){
		this.selectedCell.rowIndex='';
		this.selectedCell.columnIndex='';
	}
}