当前位置：首页 > news >正文

总结vxe-grid的一些用法

news 来源：原创 2025/6/6 10:03:49

vxetable这是我最近使用到的一个组件库，项目中多次使用，功能很是强大，记录一下使用技巧和心得。

总结vxe-grid

<vxe-grid class="grid" v-bind="gridOptions"></vxe-grid>
const gridOptions = reactive({border: true,editConfig: {trigger: "click",mode: "row",},columns: [{ type: "seq", width: 70 },{ field: "name", title: "Name", editRender: { name: "input" } },{ field: "sex", title: "Sex", editRender: { name: "input" } },{ field: "age", title: "Age", editRender: { name: "input" } },{ field: "address", title: "Address", editRender: { name: "input" } },],data: [{id: 10001,name: "Test1",role: "Develop",sex: "Man",age: 28,address: "text",}],
});

可编辑功能

上面是最基础的vxe-grid的用法，配置好v-bind：gridOptions中的editConfig和columns就可以。
难记的是有一个配置某项不可编辑。
最重要的是beforeEditMethod这个方法，这个方法接收四个参数{{row,rowIndex,column,columnIndex}}

editConfig: {trigger: "click",mode: "row",beforeEditMethod({ row, column, rowIndex, columnIndex }) {if (rowIndex == 1) {ElMessage.error("Row 2 is not editable");return false;}return true;},},

只要在editConfig配置里加上这个方法就可以了。

columns

columns: [{ type: "seq", width: 70 },{ field: "name", title: "Name", editRender: { name: "input" } },{ field: "sex", title: "Sex", editRender: { name: "input" } },{ field: "age", title: "Age", editRender: { name: "input" } },{ field: "address", title: "Address" },],

这个还有一个很灵活的东西就是每个字段可以配置editRender：{name：input}。

合计功能

columns: [{ field: 'age', title: 'age', width: 60, editRender: ageEditRender },{ title: '操作', width: 100, slots: { default: 'action' } }
],
const ageEditRender = reactive({name: 'VxeNumberInput',props: {type: 'integer',min: 1,max: 120},events: {change: updateFootEvent}
})

合计功能可以给column添加event属性配置。

合并单元格功能

<vxe-tablebordershow-overflowref="tableRef":edit-config="editConfig":merge-cells="mergeCells":data="tableData">
</vxe-table>    
const mergeCells = ref([{ row: 0, col: 0, rowspan: 2, colspan: 1 }]);