开发可复用的单元格编辑器组件，支持表单校验与异步数据加载

// 校验规则配置
const rules = [
  { required: true, message: '姓名不能为空' },
  { pattern: /^[\u4e00-\u9fa5]{2,6}$/, message: '请输入2-6位中文' },
  { max: 20, message: '长度不能超过20个字符' }
];

// 通用校验函数
function validate(value, rules) {
  for (let rule of rules) {
    if (rule.required && !value) return rule.message;
    if (rule.pattern && !rule.pattern.test(value)) return rule.message;
    if (rule.max && value.length > rule.max) return rule.message;
  }
  return '';
}

function EditableInput({ value, onChange, rules }) {
  const [error, setError] = useState('');

  function handleBlur() {
    const msg = validate(value, rules);
    setError(msg);
  }

  return (
    <div>
      <input
        value={value}
        onChange={e => onChange(e.target.value)}
        onBlur={handleBlur}
        style={{ borderColor: error ? 'red' : undefined }}
      />
      {error && <div style={{ color: 'red', fontSize: 12 }}>{error}</div>}
    </div>
  );
}

<template>
  <div>
    <input v-model="value" @blur="validateField" :class="{ error: errorMsg }" />
    <span v-if="errorMsg" class="error-msg">{{ errorMsg }}</span>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('');
const errorMsg = ref('');

function validateField() {
  if (!value.value) {
    errorMsg.value = '不能为空';
  } else if (value.value.length > 20) {
    errorMsg.value = '长度不能超过20个字符';
  } else {
    errorMsg.value = '';
  }
}
</script>

<style>
.error { border-color: red; }
.error-msg { color: red; font-size: 12px; }
</style>

import { useState, useRef } from 'react';

function useDebounce(fn, delay) {
  const timer = useRef();
  return (...args) => {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => fn(...args), delay);
  };
}

async function fetchOptions(keyword) {
  // 模拟异步请求
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' }
      ].filter(opt => opt.label.includes(keyword)));
    }, 500);
  });
}

function SearchSelect() {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

   handleSearch = ( (value) => {
    ();
     {
       list =  (value);
      (list);
    }  {
      ([]);
    }
    ();
  }, );

   (
    
  );
}

<template>
  <select @input="onInput">
    <option v-if="loading">加载中...</option>
    <option v-for="opt in options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
  </select>
</template>

<script setup>
import { ref } from 'vue';

const options = ref([]);
const loading = ref(false);
let timer;

function fetchOptions(keyword) {
  loading.value = true;
  clearTimeout(timer);
  timer = setTimeout(() => {
    options.value = [
      { value: 'apple', label: '苹果' },
      { value: 'banana', label: '香蕉' }
    ].filter(opt => opt.label.includes(keyword));
    loading.value = false;
  }, 500);
}

function onInput(e) {
  fetchOptions(e.target.value);
}
</script>

function EditableCell({ mode, value, onChange, options }) {
  switch (mode) {
    case 'text':
      return <input value={value} onChange={e => onChange(e.target.value)} />;
    case 'select':
      return (
        <select value={value} onChange={e => onChange(e.target.value)}>
          {options.map(opt => (
            <option key={opt.value} value={opt.value}>{opt.label}</option>
          ))}
        </select>
      );
    case 'date':
      return <input type="date" value={value} onChange={e => onChange(e.target.value)} />;
    default:
      return <span>{value}</span>;
  }
}

const [editingValue, setEditingValue] = useState(value);

useEffect(() => {
  setEditingValue(value);
}, [mode, value]); // 切换模式时同步外部值

function handleSave() {
  onChange(editingValue);
}

const [options, setOptions] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
  setLoading(true);
  fetch('/api/options')
    .then(res => res.json())
    .then(data => setOptions(data))
    .catch(() => alert('选项加载失败'))
    .finally(() => setLoading(false));
}, []);

return loading ? <span>加载中...</span> : <EditableCell options={options} />;

<input
  ref={inputRef}
  onKeyDown={e => {
    if (e.key === 'Enter' || e.key === 'Tab') {
      handleSaveOrFocusNext();
    }
    if (e.key === 'ArrowRight') {
      focusRightCell();
    }
  }}
/>

useEffect(() => {
  if (isEditing) {
    inputRef.current && inputRef.current.focus();
  }
}, [isEditing]);

{error && (
  <div className="input-error">
    <span className="icon-error" /> {errorMessage}
  </div>
)}

<CellEditor
  value={cellValue}
  onChange={handleCellChange}
  validationSchema={cellValidationSchema}
  loading={loading}
/>

import { Controller, useForm } from "react-hook-form";

const { control, handleSubmit } = useForm();

<Table>
  <tbody>
    <tr>
      <td>
        <Controller
          control={control}
          name="row1.cell1"
          rules={{ required: true }}
          render={({ field, fieldState }) => (
            <CellEditor
              value={field.value}
              onChange={field.onChange}
              validationSchema={Yup.string().required()}
              error={!!fieldState.error}
              loading={false}
            />
          )}
        />
      </td>
    </tr>
  </tbody>
</Table>

import { useField } from "formik";

const [field, meta, helpers] = useField("row1.cell1");

<CellEditor
  value={field.value}
  onChange={val => helpers.setValue(val)}
  validationSchema={Yup.string().required()}
  error={!!meta.error && meta.touched}
/>