前端篇——VUE3组件elementPlus通过组件选择器Select的值来更新input的值

卡Q因800

已于 2024-06-19 15:24:39 修改

阅读量194

点赞数 3

文章标签： vue.js elementui javascript typescript

于 2024-06-18 15:53:52 首次发布

本文链接：https://blog.csdn.net/weixin_72336719/article/details/139772533

版权

<评分标签>模块关联<评分记录>模块

<评分标签>查询

<评分记录>新增

步骤一：先从API中获取后端的数据给选择器的下拉选项options

自定义API函数：

export const listTag = (query?: TagQuery): AxiosPromise<TagVO[]> => {
  return request({//自定义Axios配置工具
    url: '/score/tag/list',
    method: 'get',
    params: query
  });
};

export interface TagVO {
  /**
   * 标签ID
   */
  tagId: string | number;

  /**
   * 评分对象
   */
  scoreObject: string;

  /**
   * 标签名称
   */
  tagName: string;

  /**
   * 参考分数
   */
  score: number;
}

取到API的数据：

const tagOptions = ref<{ tagId: string | number; tagName: string; scoreObject: string; score: number }[]>([]);

/** 查询评分标签列表 */
const getTagList = async () => {
  const res = await listTag();//自定义接口函数用来获取后端评分标签的数据
  tagOptions.value = res.rows;
};

步骤二：编写Element UI 的表单组件代码和更新input值的函数

<template>
......
<!--根据form.tagId的值来更新form.score的值-->
    <el-form-item label="标签ID" prop="tagId">
        <el-select v-model="form.tagId" clearable placeholder="请选择标签ID" filterable @change="updateScore">
            <el-option v-for="item in tagOptions" :key="item.tagId" :label="item.tagName" :value="item.tagId">
                <!-- 标签ID插槽 -->
                <span style="float: left">{{ item.tagName }}</span>
                <span style="float: right; color: var(--el-text-color-secondary); font-size: 12px">{{ formatScoreObject(item.scoreObject) }}</span>
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="评分分数" prop="score">、
        <el-input v-model="form.score" />
    </el-form-item>
......
</template>

<script setup name="Record" lang="ts">
const tagOptions = ref<{ tagId: string | number; tagName: string; scoreObject: string; score: number }[]>([]);

/** 查询评分标签列表 */
const getTagList = async () => {
  const res = await listTag();//自定义接口函数用来获取后端评分标签的数据
  tagOptions.value = res.rows;
};


// 根据标签ID更新评分分数
const updateScore = () => {
  switch (form.value.tagId) {
    case form.value.tagId:
      form.value.score = tagOptions.value.find((tag) => tag.tagId === form.value.tagId)?.score;
  };
</script>