ColumnForm 单表单列

说明

基于 el-table-column + el-form-item 封装，用于在表格单元格中展示单个表单项，支持表单验证、错误提示功能

用法示例

基础用法

字段列表

<template>
  <el-form ref="formRef" :model="form">
    <el-form-item label="字段列表" prop="params" hide-required-asterisk>
      <y-table :data="form.tableData" :show-footer="false">

        <y-column-form prop="name" label="接口名称" :rules="rules.name">
          <template #default="{ row, prop }">
            <el-input v-model="row[prop]"></el-input>
          </template>
        </y-column-form>

        <y-column-form prop="url" label="地址" :rules="rules.url">
          <template #default="{ row, prop }">
            <el-input v-model="row[prop]" placeholder="请输入接口地址"></el-input>
          </template>
        </y-column-form>


        <y-column-form prop="method" label="请求类型" :rules="rules.method">
          <template #default="{ row }">
            <y-select v-model="row.method" placeholder="请选择请求类型" :options="methodList"></y-select>
          </template>
        </y-column-form>

        <y-column-form prop="columnType" label="参数类型" :rules="rules.columnType">
          <template #default="{ row, prop }">
            <y-select v-model="row[prop]" placeholder="参数类型" :options="columnTypeOptions"></y-select>
          </template>
        </y-column-form>

        <!--函数形式 rules -->
        <y-column-form prop="value" label="参数值" :rules="handleValueRules">
          <template #default="{ row, prop }">
            <el-input v-model="row[prop]" placeholder="请输入参数值"></el-input>
          </template>
        </y-column-form>

        <!--no-form 普通表单项，不参与校验-->
        <y-column-form prop="description" label="备注" no-form>
          <template #default="{ row, prop }">
            <el-input v-model="row[prop]" placeholder="请输入备注"></el-input>
          </template>
        </y-column-form>
      </y-table>
    </el-form-item>
  </el-form>

  <div style="text-align:center">
    <el-button @click="add">新增</el-button>
    <el-button @click="submit" type="primary">验证表单</el-button>
    <el-button @click="reset" type="warning">重置表单</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance, TableColumnCtx } from 'element-plus'

type TableItemScope = { row: any, column: TableColumnCtx<Record<PropertyKey, any>>, $index: number }

const formRef = ref<FormInstance>()

const form = ref({
  tableData: [
    {
      name: '查询用户列表',
      url: '',
      method: '',
      value: '',
      columnType: '',
    },
    {
      name: '编辑用户信息',
      url: '',
      method: '',
      value: '',
      columnType: 'NUMBER',
    },
  ]
})

const rules = {
  name: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
  url: [{ required: true, message: '请输入接口地址', trigger: 'blur' }],
  method: [{ required: true, message: '请选择请求类型', trigger: ['blur', 'change'] }],
  columnType: [{ required: true, message: '请选择参数类型', trigger: ['blur', 'change'] }],
}

const methodList = ['GET', 'POST', 'PUT', 'DELETE'];
const columnTypeOptions = ['STRING', 'NUMBER'];
const fieldTypeOptions = ['TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'DECIMAL', 'VARCHAR', 'CHAR'];

const handleValueRules = (scope: TableItemScope) => {
  const { row } = scope;
  if (row.columnType === 'STRING') {
    return [{ required: true, message: '请输入参数值', trigger: 'blur' }];
  }
  if (row.columnType === 'NUMBER') {
    return [{ validator: validateNumber, trigger: 'blur' }];
  }
  return [];
}
const validateNumber = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入参数值'));
  } else {
    if (!Number.isNaN(Number(value))) {
      callback();
    } else {
      callback(new Error('请输入合法数字'));
    }
  }
}


const add = () => {
  form.value.tableData.push({
    name: '',
    url: '',
    method: '',
    value: '',
    columnType: '',
  });
}

const submit = () => {
  formRef.value?.validate((valid: boolean | undefined) => {
    if (valid) {
      console.log(form.value.tableData);
    } else {
      return Promise.reject(false);
    }
  });
}

const reset = () => {
  formRef.value?.resetFields();
}
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
no-from	是否不使用 el-form-item 包裹，仅作为普通表单列显示，无校验、错误提示功能	boolean	false
t-name	form中table字段名，用于数据绑定和校验	string	'tableData'
rules	表单验证规则	object / Function	—
form-props	表单项的其他属性	object	{label:'',labelWidth:'0px'}
tip-props	错误提示tooltip的属性	object	{popperClass:'y-column-form__error-tooltip',placement:'top',enterable:false}
label	显示的列标题	string	—
prop	列内容的字段名， 也可以使用 property属性	string	—
width	列的宽度，固定的	string / number	'auto'
min-width	列的最小宽度，会把剩余宽度按比例分配给设置了 min-width 的列	string / number	100
fixed	列是否固定在左侧或者右侧。 true 表示固定在左侧 true	enum / boolean	false
render-header	列标题 Label 区域渲染的函数	Function	—
resizable	是否可以通过拖动改变宽度（需要在 el-table 上设置 border=true）	boolean	true
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	boolean / object	false
align	内容对齐方式	enum	'left'
header-align	表头对齐方式， 若不设置该项，则使用表格的对齐方式	enum	'left'
class-name	列的 className	string	'y-column-form'
label-class-name	当前列标题的自定义类名	string	—

Slots

名称	说明	参数
default	表单项内容插槽	object
header	自定义表头内容	object