XMY TableForm

一个基于 Element Plus 的表格表单组合组件，用于在表格中进行表单编辑。

安装

npm install xmy-tableform

使用

全局注册

// main.js / main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import XmyTableForm from 'xmy-tableform'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(XmyTableForm)
app.mount('#app')

局部注册

<template>
  <TableForm 
    :columns="columns" 
    v-model:data="tableData" 
    @validate="handleValidate" 
    ref="tableFormRef"
  />
  <el-button @click="validateForm">校验</el-button>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { TableForm } from 'xmy-tableform'
import type { TableFormColumn, TableFormInstance } from 'xmy-tableform'

const tableFormRef = ref()

// 定义列
const columns = reactive([
  {
    label: '姓名',
    prop: 'name',
    editable: true,
    type: 'input',
    rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
  },
  {
    label: '年龄',
    prop: 'age',
    editable: true,
    type: 'input',
    props: {
      type: 'number'
    }
  },
  {
    label: '地址',
    prop: 'address',
    editable: true
  }
])

// 表格数据
const tableData = reactive([
  { name: '张三', age: 18, address: '北京' },
  { name: '李四', age: 20, address: '上海' }
])

// 校验回调
const handleValidate = (valid) => {
  console.log('校验结果：', valid)
}

// 手动校验
const validateForm = async () => {
  const valid = await tableFormRef.value.validate()
  if (valid) {
    console.log('校验通过')
  } else {
    console.log('校验不通过')
  }
}
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | columns | 表格列配置 | TableFormColumn[] | [] | | data | 表格数据 | Record<string, any>[] | [] | | inline | 是否行内表单 | boolean | true | | labelWidth | 表单标签宽度 | string | 'auto' |

Events

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | update:data | 数据更新时触发 | 更新后的数据 | | validate | 表单校验结果 | 是否校验通过 |

Slots

| 插槽名 | 说明 | | --- | --- | | pre-columns | 在表格列之前插入的内容 | | post-columns | 在表格列之后插入的内容 | | [prop]-column | 自定义列的内容，prop为列的prop值 |

方法

| 方法名 | 说明 | 参数 | | --- | --- | --- | | validate | 校验表单 | - |

类型定义

// TableFormColumn 类型
interface TableFormColumn extends Partial<TableColumnCtx<any>> {
  prop: string;
  editable?: boolean;
  type?: 'input' | 'select' | 'date-picker' | 'time-picker' | 'switch' | 'radio' | 'checkbox';
  props?: Record<string, any>;
  rules?: Array<Record<string, any>>;
}

// TableFormInstance 类型
interface TableFormInstance {
  validate: () => Promise<boolean>;
  resetFields: () => void;
  clearValidate: () => void;
}