vxe-table 实现 json 数据生成带 CRUD 功能的表格

最新推荐文章于 2026-06-11 17:37:23 发布

原创

最新推荐文章于 2026-06-11 17:37:23 发布 · 5k 阅读

标签

#vue #vxe-table

本文介绍了如何使用vxe-table库，通过vxe-grid的数据代理功能，实现从json数据到带有增删改查(CRUD)功能表格的快速渲染。详细讲述了数据代理的基本使用和封装过程，只需简单配置json，即可生成全功能表格。

vxe-table 实现 json 数据生成带 CRUD 功能的表格

先熟悉 vxe-grid 数据代理基本使用

<vxe-grid
	border
	resizable
	height="500"
	:columns="tableColumn"
	:pager-config="tablePage"
	:toolbar="tableToolbar"
	:proxy-config="tableProxy"
	:edit-config="{trigger: 'click', mode: 'row', showStatus: true}"></vxe-grid>

export default {
   
   
	data () {
   
   
      return {
   
   
        // 配置列信息
        tableColumn: [
           {
   
    type: 'checkbox', title: 'ID', width: 120 },
           {
   
    field: 'name', title: 'Name', remoteSort: true, editRender: {
   
    name: 'input' } },
           {
   
    field: 'nickname', title: 'Nickname', editRender: {
   
    name: 'input' } },
           {
   
    field: 'sex', title: 'Sex', editRender: {
   
    name: 'select', options: [] } },
           {
   
   
             field: 'role',
             title: 'Role',
             remoteSort: true, // 是否使用后台排序
             width: 200,
             // 筛选选项列表，如果为动态数据通过 filter 方法去修改
             filters: [
               {
   
    label: '前端开发', value: '前端' },
               {
   
    label: '后端开发', value: '后端' },
               {
   
    label: '测试', value: '测试' },
               {
   
    label: '程序员鼓励师', value: '程序员鼓励师' }
             ],
             filterMultiple: false, // 设置为单选
             editRender: {
   
    name: 'input' }
           },
           {
   
    field: 'describe'

最低0.47元/天解锁文章