vue vxe ui vxe-table 最强的 CRUD 增删改查表格

官网文档：https://vxetable.cn
项目需要实现可编辑表格，找到唯一满足复杂渲染 vxe-table，支持单元格任意自定义。支持自定义配置化、支持自定义模板、支持与多个 UI组件库共用，也可以渲染在单元格可编辑中渲染其他组件库的组件，太灵活了。

代码

<template>
  <div>
    <p>
      <vxe-button @click="insertEvent">新增</vxe-button>
      <vxe-button @click="validEvent">快速校验变动数据</vxe-button>
      <vxe-button @click="getInsertEvent">获取新增</vxe-button>
      <vxe-button @click="getRemoveEvent">获取删除</vxe-button>
      <vxe-button @click="getUpdateEvent">获取修改</vxe-button>
    </p>

    <vxe-grid ref="gridRef" v-bind="gridOptions">
	    <template #edit_address="{ row }">
	    	<vxe-input v-model="row.address"></vxe-input>
	    </template>
	</vxe-grid>
  </div>
</template>

<script>
import { VxeUI } from 'vxe-table'
export default {
  data () {
    const gridOptions = {
      border: true,
      showOverflow: true,
      keepSource: true,
      height: 300,
      editConfig: {
        // 触发模式：支持单击、双击、手动
        trigger: 'click',
        // 编辑模式：支持单元格编辑、行编辑
        mode: 'cell',
        // 显示单元格左上角的编辑状态
        showStatus: true
      },
      editRules: {
        name: [
          { required: true, message: '请输入名称' }
        ],
        role: [
          {
            // 自定义校验，支持同步和异步
            validator ({ cellValue }) {
              if (cellValue && !['Develop', 'Test', 'Designer', 'PM'].includes(cellValue)) {
                return new Error('角色输入不正确')
              }
            }
          }
        ],
        sex: [
          { required: true, message: '性别必须填写' },
          // 支持正则
          { pattern: /^[0,1]{1}$/, message: '格式不正确' }
        ],
        age: [
          { pattern: '^[0-9]{0,3}$', message: '格式不正确' }
        ]
      },
      columns: [
        { type: 'seq', width: 50 },
        // 支持配置化 editRender 渲染
        { field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },
        { field: 'sex', title: 'Sex', editRender: { name: 'VxeInput' } },
        { field: 'age', title: 'Age', editRender: { name: 'VxeInput', props: { type: 'integer' } } },
        // 支持自定义插槽模板
        { field: 'address', title: 'Address', slots: { default: 'edit_address' } }
      ],
      data: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
        { id: 10002, name: '', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: '', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: '', age: 23, address: 'test abc' },
        { id: 10005, name: '', role: '', sex: '1', age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' }
      ]
    }
    return {
      gridOptions
    }
  },
  methods: {
    async validEvent () {
      const $grid = this.$refs.gridRef
      if ($grid) {
        // 调用校验方法，如果不通过，则返回错误信息
        const errMap = await $grid.validate()
        if (errMap) {
          VxeUI.modal.message({ status: 'error', content: '校验不通过！' })
        } else {
          VxeUI.modal.message({ status: 'success', content: '校验成功！' })
        }
      }
    },
    async insertEvent () {
      const $grid = this.$refs.gridRef
      if ($grid) {
        const { row: newRow } = await $grid.insert({})
        // 插入一条数据并触发校验
        const errMap = await $grid.validate(newRow)
        if (errMap) {
          // 校验失败
        }
      }
    },
    getInsertEvent () {
      const $grid = this.$refs.gridRef
      if ($grid) {
        // 获取新增的数据
        const insertRecords = $grid.getInsertRecords()
        VxeUI.modal.alert(insertRecords.length)
      }
    },
    getRemoveEvent () {
      const $grid = this.$refs.gridRef
      if ($grid) {
        // 获取删除的数据
        const removeRecords = $grid.getRemoveRecords()
        VxeUI.modal.alert(removeRecords.length)
      }
    },
    getUpdateEvent () {
      const $grid = this.$refs.gridRef
      if ($grid) {
        // 获取修改的数据
        const updateRecords = $grid.getUpdateRecords()
        VxeUI.modal.alert(updateRecords.length)
      }
    }
  }
}
</script>