Vue - @change应用实现下拉框联动功能

需求：目前列表页面上有两个下拉框类型和模板，分别默认查询所有数据。用户需要在选择类型时，刷新并过滤模板下拉框的数据，此处我们需要用到change事件。

在 Vue.js 中，@change 是用于监听表单元素值变化的事件处理器，常与 v-model 搭配，实现数据的双向绑定。它的触发时机与 @input 不同，@change 只会在值改变且元素失去焦点（或按下回车）时触发，非常适合处理用户输入的最终确认逻辑。

一、准备工作

1.下载vscode

2.下拉代码

3.下载项目依赖：打开终端【ctrl + · 】，执行：npm i

4.执行项目：npm run dev

5.访问页面：http://localhost:端口号

二、原代码分析

1.根据【页面地址】或【菜单名称】，查询到对应的js文件

2.再根据component获得vue文件路径

3.vue文件中：

（1）template下是样式，通过可以找到对应的下拉框数据源定义是models

（2）data(){}下是字段定义，其中定义了models:\[\]是空数组

（3）methods:{}下是方法调用，在其中找到了models的赋值方法：getDictList，目前是无参调用的modelList接口

原代码：

javascript 复制代码

<template>
...
 <el-col :span="6">
                <el-form-item label="类型">
                  <el-select v-model="listquery.model.type" placeholder="请选择类型" clearable size="mini" style="width:95%">
                    <el-option v-for="item in types" :key="item.key" :label="item.value" :value="item.key" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="模版">
                  <el-select v-model="listquery.model.templateCode" placeholder="请选择模版" clearable size="mini" style="width:95%">
                    <el-option v-for="item in models" :key="item.templateCode" :label="item.templateName" :value="item.templateCode" />
                  </el-select>
                </el-form-item>
              </el-col>
...
</template>
<script>
...
// 引入模板列表方法 （js文件）
import { modelList } from '@/api/model'
...
export default {
data() {
listquery: {
        currentPage: 1,
        map: {},
        model: {
          templateCode: '',
          type: '',
        },
        pageSize: 10
      },
 models:[],
 types:[]
},
methods: {
// ...

getDictList () { // 获取字典表
      modelList({}).then(res => {
        if (res.data.isSuccess) {
          this.models = res.data.data
        }
      })
    }
//...
}

javascript 复制代码

// src/api/model.js
import request from '@/utils/request'

// 模板列表
export function modelList(data) {
returnrequest({
url:'/system/model/modelList',
method:'post',
data
})
}
}
...

三、代码改造

1.新增change事件：在选择类型时触发

2.新增含参的模板下拉数据查询方法

3.在getDictList中调用无参的模板下拉方法

javascript 复制代码

<template>
...
// modify：增加@change事件
 <el-col :span="6">
                <el-form-item label="类型">
                  <el-select v-model="listquery.model.type" placeholder="请选择类型" clearable size="mini" style="width:95%" @change="changeTemplateType>
                    <el-option v-for="item in types" :key="item.key" :label="item.value" :value="item.key" />
                  </el-select>
                </el-form-item>
              </el-col> 
...
</template>
...
<script>
methods: {
// ...
getDictList () { // 获取字典表
   /**   modelList({}).then(res => {
        if (res.data.isSuccess) {
          this.models = res.data.data
        }
      })
      */
  // modify：获取全部模板数据（不传类型参数）
  this.getModelList('')
},
/**
  * add ：短信类型变化
 */
 changeTemplateType(val) {
      // 短信类型change
      this.listquery.model.templateCode = ''
     // 当类型变化时，获取模板下拉数据
     this.getModelList(val)
    },
 /**
  *add： 获取模板下拉数据
 */
 getModelList(type) {
      const params = {}
      // 如果选择了类型则传入参数，否则不传
      if (type) {
        params.type = type;
      }
      modelList(params).then(res => {
        const {data: {data, code }} = res
        if (code === 0) {
          this.risks = res.data.data
				 // 若需要对结果进行进一步过滤
				 // this.riskTypes = res.data.data.filter(item => item.key === '1')
        }
      })
    },

//...
}