kendo-splitter动态分配分隔框大小

通过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}}
})