ColumnForms 多表单列

说明

基于 el-table-column + el-form-item 封装，用于在表格的单元格内展示多个表单项，支持表单验证、条件显示等功能。

该组件需要配合 y-table 和 el-form 使用，每个表单项通过具名插槽的方式自定义内容，插槽名称与每个表单项配置的 prop 属性对应。

用法示例

基础用法

字段列表

<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-forms label="字段名称" :options="nameFormOptions" :inline="false">
          <template #name="{ row, prop }">
            <el-input v-model.trim.number="row[prop]" placeholder="请输入英文名称"></el-input>
          </template>
          <template #nameCn="{ row, prop }">
            <el-input v-model.trim.number="row[prop]" placeholder="请输入中文名称"></el-input>
          </template>
        </y-column-forms>

        <y-column-forms label="字段配置（inline布局）" :options="formArr" width="400px">
          <template #type="{ row, prop }">
            <y-select v-model="row[prop]" placeholder="字段类型" :options="fieldTypeOptions"></y-select>
          </template>
          <template #length="{ row, prop }">
            <el-input v-model.trim.number="row[prop]" placeholder="长度"></el-input>
          </template>
          <template #precision="{ row, prop }">
            <el-input v-model.trim.number="row[prop]" placeholder="精度"></el-input>
          </template>
        </y-column-forms>

        <y-column-forms label="字段配置（flex布局）" :options="formArr1" :inline="false">
          <template #type="{ row, prop }">
            <y-select v-model="row[prop]" placeholder="字段类型" :options="fieldTypeOptions" type="simple"></y-select>
          </template>
          <template #length="{ row, prop }">
            <el-input v-model="row[prop]" placeholder="长度"></el-input>
          </template>
          <template #precision="{ row, prop }">
            <el-input v-model="row[prop]" placeholder="精度"></el-input>
          </template>
        </y-column-forms>
      </y-table>
    </el-form-item>
  </el-form>

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

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

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

const formRef = ref<FormInstance>()
// 表单配置
const form = ref({
  // 表单数据内绑定表格的数据
  tableData: [
    {
      name: '',
      nameCn: '',
      type: '',
      length: null,
      precision: null,
    },
    {
      name: '',
      nameCn: '',
      type: '',
      length: null,
      precision: null,
    },
  ]
})

const fieldTypeOptions = ['TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'DECIMAL', 'VARCHAR', 'CHAR'];

const nameFormOptions = [
  {
    prop: 'name',
    label: '英文名称',
    labelWidth: '80px',
    rules: [{ required: true, message: '请输入字段名称', trigger: ['blur'] }],
  },
  {
    prop: 'nameCn',
    label: '中文名称',
    labelWidth: '80px',
  },
]

const formArr = [
  {
    prop: 'type',
    width: '160px',
    rules: [{ required: true, message: '请选择字段类型', trigger: ['blur', 'change'] }],
  },
  {
    prop: 'length',
    rules: (scope: TableItemScope, prop: string) => validateLength(scope.row),
    show: (scope: TableItemScope, prop: string) => ['DECIMAL', 'VARCHAR', 'CHAR'].includes(scope.row.type),
    width: '100px',
  },
  {
    prop: 'precision',
    rules: (scope: TableItemScope, prop: string) => validatePrecision(scope.row),
    show: (scope: TableItemScope, prop: string) => 'DECIMAL' === scope.row.type,
    width: '100px',
  },
]

const formArr1 = [
  {
    prop: 'type',
    rules: [{ required: true, message: '请选择字段类型', trigger: ['blur', 'change'] }],
    style: 'width:100%;',
  },
  {
    prop: 'length',
    rules: (scope: TableItemScope, prop: string) => validateLength(scope.row),
    show: (scope: TableItemScope, prop: string) => ['DECIMAL', 'VARCHAR', 'CHAR'].includes(scope.row.type),
    style: 'width:100px;',
  },
  {
    prop: 'precision',
    rules: (scope: TableItemScope, prop: string) => validatePrecision(scope.row),
    show: (scope: TableItemScope, prop: string) => 'DECIMAL' === scope.row.type,
    style: 'width:100px;',
  },
]

const validateLength = (row: any) => {
  const rules = [];
  if (row.type === 'DECIMAL') {
    rules.push({ required: true, message: '请输入长度', trigger: ['blur', 'change'] });
    rules.push({
      validator: (rule: any, value: any, callback: any) => {
        if (value < row.precision) {
          callback(new Error('长度必须大于等于精度'));
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change'],
    });
    rules.push({
      validator: (rule: any, value: any, callback: any) => {
        if (value < 0) {
          callback(new Error('长度必须大于等于0'));
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change'],
    });
  }
  return rules;
}

const validatePrecision = (row: any) => {
  const rules = [];
  if (row.type === 'DECIMAL') {
    rules.push({ required: true, message: '请输入精度', trigger: ['blur', 'change'] });
    rules.push({
      validator: (rule: any, value: any, callback: any) => {
        if (value > row.length) {
          callback(new Error('精度必须小于等于长度'));
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change'],
    });
    rules.push({
      validator: (rule: any, value: any, callback: any) => {
        if (value < 0) {
          callback(new Error('精度必须大于等于0'));
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change'],
    });
  }
  return rules;
}

const submit = () => {
  formRef.value?.validate((valid: boolean | undefined) => {
    if (valid) {
      alert('submit!');
    } else {
      return Promise.reject(false);
    }
  });
}

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

</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
options	表单项配置数组	object	[]
inline	flex-wrap 行为来控制表单排列	boolean	true
t-name	form中table字段名，用于绑定校验组	string	'tableData'
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-forms'
label-class-name	当前列标题的自定义类名	string	—

ColumnFormsItem

属性名	说明	类型	默认值
prop	表单项的字段名，必填	string	—
label	表单项的标签	string	—
labelWidth	表单项标签宽度	string / number	—
rules	表单验证规则	object / Function	—
formAttrs	表单项的其他属性	object / Function	—
show	是否显示表单项	boolean / Function	true
width	表单项宽度	string / Function	auto
tipProps	错误提示tooltip的属性	object / Function	{popperClass:'y-column-form__error-tooltip',effect:'dark',placement:'top',enterable:false}
style	表单项样式	object / Function	—

Slots

名称	说明	参数
[prop]	具名插槽，根据 options 中每个表单项的 prop 属性命名，用于自定义表单项内容	object
header	自定义表头内容	object