vxe-table vue 表格禁用单元格编辑的2种实现方式

vxe-table vue 表格禁用单元格编辑的2种实现方式
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
阻止激活编辑

设置 edit-config 的 beforeEditMethod 方法判断单元格是否禁用，例如：限制第二行不允许编辑

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions" v-on="gridEvents">
4.       <template #edit_name="{ row }">
5.         <vxe-input v-model="row.name"></vxe-input>
6.       </template>
8.       <template #edit_sex="{ row }">
9.         <vxe-input v-model="row.name"></vxe-input>
10.       </template>
12.       <template #edit_age="{ row }">
13.         <vxe-input v-model="row.name"></vxe-input>
14.       </template>
16.       <template #edit_address="{ row }">
17.         <vxe-input v-model="row.name"></vxe-input>
18.       </template>
19.     </vxe-grid>
20.   
21. </template>

复制代码

禁用编辑控件

通过 disabled 方式禁用控件，实现行编辑中对列的权限控制

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions" v-on="gridEvents">
4.       <template #edit_name="{ row }">
5.         <vxe-input v-model="row.name"></vxe-input>
6.       </template>
8.       <template #edit_sex="{ row }">
9.         <vxe-input v-model="row.name"></vxe-input>
10.       </template>
12.       <template #edit_age="{ row }">
13.         <vxe-input v-model="row.name"></vxe-input>
14.       </template>
16.       <template #edit_address="{ row }">
17.         <vxe-input v-model="row.name"></vxe-input>
18.       </template>
19.     </vxe-grid>
20.   
21. </template>

复制代码

https://gitee.com/x-extends/vxe-table

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除