vue2以及vue3基于el-table实现表格正则校验功能

在Vue2和Vue3中，可以通过自定义指令来实现对el-table的正则验证功能。以下是一个简单的例子，展示了如何在Vue2和Vue3中实现对el-table单元格编辑的正则验证。

Vue2示例代码：

// 自定义指令
Vue.directive('validate', {
  bind(el, binding, vnode) {
    el.addEventListener('input', () => {
      const value = el.value;
      const pattern = binding.value;
      if (!pattern.test(value)) {
        vnode.elm.style.border = '2px solid red';
      } else {
        vnode.elm.style.border = '2px solid green';
      }
    });
  }
});
 
// 在组件中使用
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="邮箱" width="180">
      <template slot-scope="scope">
        <input
          v-model="scope.row.email"
          v-validate="/\w+@\w+\.\w+/"
          :value="scope.row.email"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

Vue3示例代码：

import { DirectiveBinding } from 'vue';
 
const validateDirective = (el: HTMLElement, binding: DirectiveBinding) => {
  el.addEventListener('input', () => {
    const value = (el as HTMLInputElement).value;
    const pattern = binding.value;
    if (pattern instanceof RegExp) {
      if (!pattern.test(value)) {
        el.style.border = '2px solid red';
      } else {
        el.style.border = '2px solid green';
      }
    }
  });
};
 
export default {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    validateDirective(el, binding);
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    validateDirective(el, binding);
  }
};
 
// 在组件中使用
<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- other columns -->
    <el-table-column label="邮箱" width="180">
      <template #default="{ row }">
        <input
          v-model="row.email"
          v-validate="/^\w+@\w+\.\w+$/"
          :value="row.email"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

在这两个示例中，我们定义了一个自定义指令v-validate，它会对输入框的值进行正则表达式验证。如果输入的值不符合正则表达式规则，则会显示红色边框提示错误；否则，显示绿色边框表示通过验证。在Vue3中使用了新的自定义指令API，并使用#default插槽来替代Vue2中的slot-scope。