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