avue-crud编辑按钮隐藏

要在 Avue-Crud 组件中隐藏编辑按钮，可以通过设置 `option` 属性中的相关参数来实现。具体来说，可以将 `editBtn` 和 `updateBtn` 参数设为 `false` 来禁用行内的编辑按钮以及更新操作按钮。 以下是完整的代码示例： ```vue <template> <avue-crud :option="option" :data="data" :page.sync="page" :permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"> </avue-crud> </template> <script> export default { data() { return { form: {}, loading: false, page: {}, permissionList: [], beforeOpen: null, beforeClose: null, data: [ { name: '张三', sex: '男', date: '1994-02-23 00:00:00' }, { name: '李四', sex: '女', date: '1994-02-23 00:00:00' }, { name: '王五', sex: '女', date: '1994-02-23 00:00:00' }, { name: '赵六', sex: '男', date: '1994-02-23 00:00:00' } ], option: { title: '表格的标题', align: 'center', menuAlign: 'center', columnBtn: false, refreshBtn: false, saveBtn: false, updateBtn: false, // 隐藏行编辑后的更新按钮 cancelBtn: false, // 隐藏行编辑取消按钮 addBtn: false, // 隐藏表格新增按钮 delBtn: true, // 是否显示行删除按钮 editBtn: false, // 隐藏行编辑按钮 column: [ { label: '姓名', prop: 'name', slot: true, formslot: true }, { label: '性别', prop: 'sex' }, { label: '日期', prop: 'date', type: 'date', format: 'yyyy-MM-dd hh:mm:ss', valueFormat: 'yyyy-MM-dd hh:mm:ss' } ] } }; }, methods: { rowUpdate(row, index, done) { console.log('Row Updated:', row); done(); }, rowSave(row, done) { console.log('Row Saved:', row); done(); }, rowDel(row) { console.log('Row Deleted:', row); }, sizeChange(pageSize) { this.page.pageSize = pageSize; }, refreshChange() { console.log('Table Refreshed'); }, onLoad(data) { console.log('Data Loaded:', data); } } }; </script> ``` 通过以上配置，`editBtn` 和 `updateBtn` 均被设置为 `false`，从而实现了隐藏编辑按钮的效果[^2]。 ### 注意事项 如果仅需隐藏某特定功能按钮而保留其他功能，则只需调整对应的布尔值即可。例如，若希望保留删除按钮的功能，则无需修改 `delBtn` 的值，默认情况下其值为 `true`。