如何在Kendo UI Vue原生Grid中锁定列？locked属性失效问题

我之前碰到过一模一样的情况，帮你梳理下核心原因和修复方案：

关键问题：Grid高度设置为auto #

Kendo UI Vue的locked列生效的前提是Grid容器有明确的固定高度。你现在用的:style="{height: 'auto'}"会让Grid完全自适应内容高度，不会触发横向/纵向滚动机制——而固定列的布局逻辑完全依赖可滚动的内容区域，这时候locked属性自然会被忽略。

具体修复步骤 #

1. 给Grid设置固定高度 #

把Grid的高度改成具体数值（比如500px）或者最小高度，确保内容超出时会出现滚动条：

<Grid 
  ref="grid" 
  :style="{height: '500px'}" 
  :data-items="items" 
  :resizable="true" 
  :columns="columns" 
  :edit-field="'inEdit'"
></Grid>

2. 确认主题样式已正确导入 #

Locked列的布局需要Kendo主题CSS的支持，检查你的项目是否导入了对应的样式文件（以默认主题为例）：

// 在main.js或组件的<style>中导入
import '@progress/kendo-theme-default/dist/all.css';

3. 补充完整测试数据（可选但建议） #

你当前的items里只有column1的数据，column2和column3为空，可能看不出横向滚动的效果，建议补充完整数据方便验证：

items = [ 
  {"column1": "1", "column2": "测试内容A", "column3": "更多测试内容X", "inEdit": true}, 
  {"column1": "2", "column2": "测试内容B", "column3": "更多测试内容Y", "inEdit": true}, 
  {"column1": "3", "column2": "测试内容C", "column3": "更多测试内容Z", "inEdit": true} 
];

4. 保证列配置的响应式更新 #

因为你是动态配置列，修改columns数组时要使用Vue响应式的方式（比如this.columns = [...newColumns]或splice方法），避免直接修改数组元素导致Grid无法重新渲染。

额外注意事项 #

• 尽量使用最新稳定版的Kendo UI Vue，旧版本可能存在locked列的兼容性问题；
• Locked列可以放在任意位置，但通常建议放在左侧，更符合用户操作习惯；
• 如果需要自适应高度但仍要启用locked列，可以尝试设置max-height: calc(100vh - 200px)配合overflow: auto，不过固定高度是最稳妥的方案。

内容的提问来源于stack exchange，提问作者igasparetto