一、使用数组与循环的组合
<template>
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form-item :label="t('lables.name')">
<el-input
v-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 = [
'测试','用户','年龄','性别','姓名'
];
for (const keyword of keywords) {
if (params.shortName.includes(keyword)) {
return ElMessage({
type: 'error',
message: '暂不支持该字段查询,请输入正确的字段',
});
}
}
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-input
v-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 =
/公司|国际|网络|科技|贸易/;
if (pattern.test(params.name)) {
return ElMessage({
type: 'error',
message: '暂不支持该输入查询,请输入正确的公司简称',
});
}
queryList (params).then((res) => {
tableData.value = res;
});
}
return {
form,
t,
query,
tableData,
};
},
});
</script>