w-form-select.vue（自定义下拉框组件）

embedded/2025/1/20 22:45:45/

文章目录

  • 1、w-form-select.vue 组件中每个属性的含义
  • 2、实例
  • 3、源代码

1、w-form-select.vue 组件中每个属性的含义

好的，我们来详细解释 w-form-select.vue 组件中每个属性的含义，并用表格列出它们是否与后端字段直接相关：

属性解释表格：

属性名类型默认值含义与后端字段直接相关性
labelstring''表单项的标签文本，显示在输入框左侧。否
propstring''表单验证的关键。 对应后端数据模型中的一个字段名。 主要用于 el-form 的表单验证。是
labelWidthstring'160px'标签的宽度。否
labelAlignstring'right'标签文本的对齐方式。否
tipstring''鼠标悬停在标签上的提示文本。否
operateTypestring''操作类型，用于判断组件的显示状态（如 'add', 'edit', 'view'）。否
inputWidthstring'100%'控制内部 el-select 组件的宽度。 可以是像素值、百分比或其他有效 CSS 宽度值。否
valueany''组件的值。这个值通常直接对应后端字段的值。 使用 v-model 双向绑定此值。是
multiplebooleanfalse是否允许多选。如果为 true，则 value 为数组；否则 value 为单个值。否
listany[][]下拉选择框的数据源。通常是一个对象数组，其中每个对象表示一个选项。间接相关
optionLabelstring''指定 list 中哪个属性的值作为下拉选项的标签文本显示。否
optionValuestring'value'指定 list 中哪个属性的值作为下拉选项的值。是
placeholderstring''下拉选择框的占位符文本。否
inputEndstring''在输入框后附加的文本或元素。否
allowCreatebooleanfalse是否允许用户创建新的选项。否
defaultFirstOptionbooleanfalse是否在输入框有值的时候，默认选择第一个匹配的选项。否

详细解释:

  • 与后端字段直接相关：

    • prop: 这个属性的值通常与后端数据模型的字段名称对应， 用于表单验证， 例如你在后端有一个 userType 的字段，那么你可以设置 prop="userType"。 prop 的值不是直接传递给后端，而是用来匹配 rules, 用于表单校验。
    • value: 组件的值，例如用户选择了 普通用户， value 通常是 1， 最终会和表单其他数据一起提交给后端。 value 的值直接对应后端字段的值，例如，如果后端有一个 userType 字段， 你的表单提交数据中也需要 userType: 1 。 v-model 直接绑定了 value。
      • 如果 :multiple="true"： value 为 [1, 3, 5] 等数组， 对应后端可能也会是这样的数组结构，例如 "relatedIds":[1,3,5]。
      • 如果 :multiple="false"： value 为 1, 对应后端字段值， 例如 userType: 1。
    • optionValue: 指定 list 中哪个属性的值作为下拉选项的值传递给后端， 例如你的 list 为 [{id: 1, label: '普通用户'}]， 那么 optionValue="id" 表明，你选择了 普通用户 后， id 为 1 的值，会被作为 value 提交给后端。

  • 与后端字段间接相关：

    • list: 虽然 list 本身不会直接提交给后端，但它的数据通常来源于后端接口返回的数据。例如，你通常会从后端接口获取一个 用户类型列表，作为你的 list 的数据来源。

  • 与后端字段无直接关系：

    • 其他属性，如 label, labelWidth, tip, operateType, inputWidth, optionLabel, placeholder, inputEnd , allowCreate, defaultFirstOption, 等， 主要用于控制前端 UI 的展示，与后端字段没有直接的对应关系。

总结：

这个表格清晰地展示了 w-form-select 组件中每个属性的作用，以及它们与后端字段的关系。 请记住， prop 用作表单验证， value 是与后端字段值直接对应的， 而 optionValue 指定了传递给后端的值。 其他属性主要用于组件的 UI 展示和交互。

2、实例

          <w-form-select v-model="form.relatedIds" label="关联识别点" label-width="120px" :operate-type="operateType":list="identifies" option-label="description" option-value="id" :multiple="true" input-width="100%"@visible-change="handleVisibleChange"/>

在这个例子中，v-model="form.relatedIds" 这个属性对应着 w-form-select 组件的 value。

详细解释：

  • v-model 的作用： v-model 是 Vue.js 中用于双向数据绑定的语法糖。 它实际上是 v-bind:value 和 @input (或者 @change， 如果是 <select> 组件) 的简写形式。

  • v-model="form.relatedIds" 的含义：

    • 读取值： 组件初始化时，会读取 form.relatedIds 变量的值，并显示在 w-form-select 组件中。
    • 更新值： 当用户在 w-form-select 组件中选择了新的选项时，组件的值会自动更新到 form.relatedIds 变量。
    • 双向绑定： 实现了 w-form-select 组件的 value 属性和 form.relatedIds 变量之间的双向绑定。

  • w-form-select 的 value:

    • 在 w-form-select 组件的代码中，我们看到了 v-model="val"， 并且在 value 发生变化的时候， 将其更新到 val 变量。

         @Watch('value')watchValue(v: any) {this.val = v}

      并且 el-select 组件使用了 v-model="val"：

         <el-select v-model="val" ... />

    • 当 w-form-select 组件的值发生变化的时候，会触发 @input 事件，并且传递组件的值, 最终触发的是 w-form-select 组件的 @input 事件：

       @input="value => $emit('input', value)"

  • 所以 v-model="form.relatedIds" 实际上是以下代码的简写：

    <w-form-select:value="form.relatedIds"@input="value => form.relatedIds = value"label="关联识别点"label-width="120px":operate-type="operateType":list="identifies"option-label="description"option-value="id":multiple="true"input-width="100%"@visible-change="handleVisibleChange"
/>

  • form.relatedIds 的值：

    • 由于 :multiple="true" ， 所以 form.relatedIds 的值是一个数组， 包含了用户选择的多个 id 值， 例如 [1, 3, 5]。 如果 :multiple="false" ， 则是一个单独的值， 例如 1。

  • 后端关系: form.relatedIds 最终会传递到后端， 对应后端数据模型的字段。

总结：

在你的代码示例中， w-form-select 组件的 value 属性的值被 v-model="form.relatedIds" 所控制。 form.relatedIds 变量存储了组件的当前值，并且实现了双向数据绑定。

因此， 在你这个例子中 v-model="form.relatedIds" 就是对应 w-form-select 组件的 value 属性。

3、源代码

<!-- src/components/DialogForm/func/w-form-select.vue -->
<template><div class="wrap"><div class="box"><el-form-item :label="label" :prop="prop" :label-width="labelWidth"><div slot="label" :style="`text-align: ${labelAlign};`"><span>{{ label }}<el-tooltip class="item" effect="dark" :content="tip || label || placeholder" placement="bottom-start"><i class="el-icon-warning-outline" /></el-tooltip></span></div><span v-if="operateType === 'view'"><template v-if="multiple">{{ list && list.length && list.filter(o => val.includes(o[optionValue])).map(o => o[optionLabel]).join(',')}}</template><template v-else><!-- {{ getSelectLabel(val) }} -->{{ list && list.length && list.find(o => val === o[optionValue]) && list.find(o => val ===o[optionValue])[optionLabel] }}</template></span><div v-else class="input-container"><!-- 这里有一个 v-else --><el-select v-model="val" :multiple="multiple" filterable clearable :placeholder="placeholder || label || tip":allow-create="allowCreate" :default-first-option="defaultFirstOption":style="inputWidth ? `width: ${inputWidth};` : `width: 100%;`" @input="value => $emit('input', value)"@change="value => $emit('change', value)"@visible-change="value => $emit('visible-change', value)"><el-option v-if="list.length" :label="` `" :value="` `" /><el-option v-for="(item, i) in list" :key="'' + item[optionLabel] + item[optionValue] + i":label="item[optionLabel]" :value="item[optionValue]"/></el-select></div><div class="append-slot"><!-- 添加一个容器包裹插槽 --><slot name="append"></slot> <!-- 插槽用于放置图片 --></div><template v-if="inputEnd">&nbsp;&nbsp;&nbsp;&nbsp;</template>{{ inputEnd }}</el-form-item></div></div>
</template>
<script lang="ts">javascript">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import { UserModule } from '@/store/modules/user'@Component({name: 'w-form-input',components: {}
})export default class extends Vue {@Prop({ default: '' })public label!: string@Prop({ default: '' })public prop!: string@Prop({ default: '160px' })public labelWidth: string@Prop({ default: 'right' })public labelAlign: string@Prop({ default: '' })public tip?: string@Prop({ default: '' })public operateType!: string@Prop({ default: false })@Prop({ default: '100%' })public inputWidth?: string@Prop({ default: '' })public value?: any@Prop({ default: false })public multiple: boolean@Prop({ default: () => [] })public list!: any@Prop({ default: '' })public optionLabel: string@Prop({ default: 'value' })public optionValue: string@Prop({ default: '' })public placeholder?: string@Prop({ default: '' })public inputEnd?: string@Prop({ default: false })public allowCreate?: boolean@Prop({ default: false })public defaultFirstOption?: boolean@Watch('list')watchList(v: any) {this.selList = v}@Watch('value')watchValue(v: any) {this.val = v}private multipleFlag: boolean = falseprivate selList: any = this.listprivate val: any = this.value
}
</script>
<style scoped lang="scss">
.wrap {width: 100%;.box {width: 100%;position: relative;overflow: visible;}.input-container {position: relative; /* 确保下拉框的弹出层基于此容器定位 */display: inline-block; /* 让下拉框和图片在同一行 */}.append-slot {position: absolute; /* 将图片绝对定位 */left: 15%; /* 图片放置在下拉框右侧 */top: 53%; /* 垂直居中 */transform: translateY(-50%); /* 确保垂直居中 */margin-left: 10px; /* 图片与下拉框的间距 */z-index: 1; /* 确保图片在下拉框之上 */}/* 确保 el-select 的下拉菜单不受干扰 */.el-select {width: 200px; /* 设置默认宽度 */position: relative; /* 确保下拉框的弹出层基于此容器定位 */}.el-select-dropdown {z-index: 9999 !important; /* 确保下拉菜单在最上层 */}}
</style>

在这里插入图片描述


http://www.ppmy.cn/embedded/155600.html

相关文章

Centos 宝塔安装

Centos 宝塔安装

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 安装成功界面 宝塔说明文档 https://www.bt.cn/admin/servers#wcu 或者可以注册宝塔账号 1 快速部署 安装docker 之后 2 需要在usr/bin下下载do…
阅读更多...
1.19学习

1.19学习

web nssctf- [SWPUCTF 2021 新生赛]easyupload2.0 开启环境后&#xff0c;看到需要我们上传文件&#xff0c;上传一句话木马文件&#xff0c;将后缀名改为jpg上传&#xff0c;否则无法上传。然后打开bp&#xff0c;拦截其上传这一步&#xff0c;然后改filename的后缀为php&am…
阅读更多...
什么是股指期货的到期风险？

什么是股指期货的到期风险？

买股票的时候&#xff0c;我们可以选择短期炒炒&#xff0c;也可以选择长期持有&#xff0c;挺灵活的。但是&#xff0c;股指期货可就不一样了&#xff0c;它交易的是标准化的期货合约&#xff0c;这个合约有个特点&#xff0c;就是有个到期日&#xff0c;不能像股票那样想持多…
阅读更多...
Linux 管道操作

Linux 管道操作

Linux 管道操作 在 Linux 中&#xff0c;管道&#xff08;Pipe&#xff09;是一个非常强大且常用的功能&#xff0c;它允许将一个命令的输出直接传递给另一个命令作为输入&#xff0c;从而能够高效地处理和分析数据。管道在多个命令之间建立数据流&#xff0c;减少了文件的读写…
阅读更多...
htmlcssJavaScript网页开发：年会手机号抽奖案例

htmlcssJavaScript网页开发：年会手机号抽奖案例

见过不少人、经过不少事、也吃过不少苦&#xff0c;感悟世事无常、人心多变&#xff0c;靠着回忆将往事串珠成链&#xff0c;聊聊感情、谈谈发展&#xff0c;我慢慢写、你一点一点看...... <!DOCTYPE html> <html> <head> <meta charset"…
阅读更多...
linux的用户管理和权限设置相关命令

linux的用户管理和权限设置相关命令

一.linux的用户管理命令 1.1 useradd命令 useradd 命令用于创建新用户账号。其名称useradd 是“User Add”的缩写&#xff0c;意为添加用户。 useradd命令的基本语法&#xff1a;useradd [选项] 用户名 其中&#xff0c;[选项] 是可选的&#xff0c;可以使用不同的选项实现…
阅读更多...
内存与缓存：保姆级图文详解

内存与缓存：保姆级图文详解

文章目录 前言1、计算机存储设备1.1、硬盘、内存、缓存1.2、金字塔结构1.3、数据流通过程 2、数据结构内存效率3、数据结构缓存效率 前言 亲爱的家人们&#xff0c;创作很不容易&#xff0c;若对您有帮助的话&#xff0c;请点赞收藏加关注哦&#xff0c;您的关注是我持续创作的…
阅读更多...
20250118面试鸭特训营第26天

20250118面试鸭特训营第26天

更多特训营笔记详见个人主页【面试鸭特训营】专栏 1.说下你常用的 Linux 命令&#xff1f; 文件与目录操作 命令描述ls列出当前目录和文件和子目录ls -l列出当前目录和文件和子目录&#xff0c;包括详细信息ls -a列出当前目录和文件和子目录&#xff0c;包括隐藏文件cd切换目…
阅读更多...
最新文章

Copyright @ 2022~2023