先上效果图:
需求:
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='';
}
}