通过size方法，动态改变框大小，参考链接：https://docs.telerik.com/kendo-ui/api/javascript/ui/splitter/methods/size
vue画面
<kendo-button type="primary" @click="changePane">button</kendo-button>
<kendo-splitter
:orientation="'vertical'"
ref="splitterRef"
:panes="[
{
'size': 'calc(100% - 215px)',
'collapsible': true
},
{
'size': '85px',
'collapsible': true
},
{
'size': '130px',
'collapsible': true
}
]"
>
<div id='splitter1'></div>
<div id='splitter2'></div>
<div id='splitter3'></div>
</kendo-splitter>
ts文件
import {
Splitter } from '@progress/kendo-layout-vue-wrapper';
export default defineComponent({
name: 'QMCJC5',
components: {
AgGridVue, toolBar, 'kendo-splitter': Splitter },
setup: () => {
const splitterRef = ref<any>(null);
const splitterRefInstance = computed(() => {
return splitterRef.value?.kendoWidget() as kendo.ui.Splitter;
});
const changePane = ()=>{
let splitter = splitterRefInstance.value;
splitter.size('#splitter1', 'calc(100% - 331px)');
splitter.size('#splitter2', '190px');
splitter.size('#splitter3', '130px');
}
return {
changePane,
splitterRef
}
}
})
