el-select 待标签

"el-select"是Element UI库中的一个组件，它是一个下拉选择框，常用于单选或多选选项的选择。待标签（tag）功能通常是在`el-select`的multiple模式下启用的，允许用户直接输入文本并创建新的自定义选项，这个新选项会被添加到已选列表中。当用户开始输入，组件会提供自动补全建议，点击提交按钮即可将输入的文本作为新标签添加。

例如，设置待标签的方式：

<el-select v-model="tags" multiple placeholder="请输入标签" :trigger-on-focus="true">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

在这个例子中，`v-model="tags"`绑定的是当前选择的标签数组，`:trigger-on-focus="true"`表示焦点触发待选项。

相关问题

element-plus 查询表单

### Element Plus 查询表单使用方法

#### 创建查询表单结构
为了创建一个查询表单，在HTML模板中需引入`<el-form>`组件来包裹各个表单项。每个表单项由`<el-form-item>`表示，用于定义具体的输入控件及其验证规则。

<template>
  <div style="margin: 20px;">
    <!-- el-form 组件 -->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="审批人" prop="approver">
        <el-input v-model="queryForm.approver" placeholder="请输入审批人"></el-input>
      </el-form-item>

      <el-form-item label="活动区域" prop="region">
        <el-select v-model="queryForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

上述代码展示了如何利用内联样式布局使多个表单项在同一行显示，并设置了两个不同的查询条件：“审批人”和“活动区域”。此外还提供了一个按钮触发提交操作[^1]。

#### 设置查询表单模型与事件处理函数
在Vue实例内部声明响应式的`data()`对象中的`queryForm`变量作为表单数据源；编写相应的JavaScript逻辑以监听点击事件并执行实际的查询动作。

<script setup lang="ts">
import { reactive } from 'vue';

const queryForm = reactive({
  approver: '',
  region: ''
});

// 处理查询请求的方法
function onSubmit() {
  console.log('submit!', queryForm);
}
</script>

此段脚本初始化了`queryForm`对象用来存储用户输入的信息，并实现了当按下“查询”按钮时调用`onSubmit()`方法打印出当前填写的内容到控制台以便进一步处理或发送给服务器端接口进行筛选返回结果集[^4]。

#### 添加自定义校验规则
如果希望某些字段成为必填项或其他特定约束，则可以在`<el-form>`标签上增加`:rules`属性关联一组预设好的检验准则。对于每一个待验证项目而言，应该为其对应的`<el-form-item>`设定好`prop`参数指向该条目的键名，这样就能让框架自动完成必要的合规性检测工作。

<!-- 增加 rules 属性 -->
<el-form :inline="true" :model="queryForm" :rules="rules" ref="ruleFormRef">

...

</el-form>

const ruleFormRef = ref(null);

const rules = reactive({
  approver: [
    { required: true, message: '请输入审批人', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '请选择活动区域', trigger: 'change' }
  ]
});

这里增加了对`approver`(审批人) 和 `region`(活动区域) 字段的必要性检查，即不允许为空白状态提交。每当失去焦点(`trigger:'blur'`) 或者选项改变(`trigger:'change'`)的时候都会触发表单验证机制[^3]。