一、使用数组与循环的组合

<template><el-form :inline="true" :model="form" class="demo-form-inline"><el-form-item :label="t('lables.name')"><el-inputv-model="form.name"placeholder="请输入字段名称"clearable/></el-form-item><el-form-item><el-button type="primary" @click="query">{{t('action.query')}}</el-button></el-form-item></el-form><el-table :data="tableData" border style="width: 100%"><el-table-column prop="name" :label="t('lables.name')" />...</el-table></template><script lang="ts">
import {defineComponent,reactive,ref,
} from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ElMessage} from 'element-plus';
import { queryList } from '@/services/list';export default defineComponent({name: 'List',components: {},setup() {const { t } = useI18n();const router = useRouter();const form = reactive({name: '',});const tableData = ref<any[]>([]);function query() {const params = {name: form.name,};// 创建一个包含需要检查的关键字的数组const keywords = ['测试','用户','年龄','性别','姓名'];// 检查 params.shortName 是否包含关键字数组中的任何一个关键字for (const keyword of keywords) {if (params.shortName.includes(keyword)) {// 如果包含，则弹出 elmessagereturn ElMessage({type: 'error',message: '暂不支持该字段查询，请输入正确的字段',});}}// 如果没有包含任何关键字，则请求后端接口 这里的queryList是接口queryList(params).then((res) => {tableData.value = res;});}return {form,t,query,tableData,};},
});
</script>

二、正则与正则方法的结合

<template><el-form :inline="true" :model="form" class="demo-form-inline"><el-form-item :label="t('lables.name')"><el-inputv-model="form.name"placeholder="请输入字段名称"clearable/></el-form-item><el-form-item><el-button type="primary" @click="query">{{t('action.query')}}</el-button></el-form-item></el-form><el-table :data="tableData" border style="width: 100%"><el-table-column prop="name" :label="t('lables.name')" />...</el-table></template><script lang="ts">
import {defineComponent,reactive,ref,
} from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ElMessage} from 'element-plus';
import { queryList } from '@/services/list';export default defineComponent({name: 'List',components: {},setup() {const { t } = useI18n();const router = useRouter();const form = reactive({name: '',});const tableData = ref<any[]>([]);function query() {const params = {name: form.name,};// 创建一个正则表达式，使用 | 来匹配任意一个关键字const pattern =/澳华|全中|卓凡|供应链|公司|物流|国际|网络|代理|科技|货运|贸易/;// 使用 test 方法检查 params.name是否匹配正则表达式if (pattern.test(params.name)) {// 如果匹配，则弹出 elmessagereturn ElMessage({type: 'error',message: '暂不支持该输入查询，请输入正确的公司简称',});}// 如果没有匹配，则请求接口queryCrmCustomer(params).then((res) => {tableData.value = res;});}return {form,t,query,tableData,};},
});
</script>