后端奇特需求2---table

最新推荐文章于 2024-11-07 14:11:51 发布

hanjuyuan

最新推荐文章于 2024-11-07 14:11:51 发布

阅读量110

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/hanjuyuan/article/details/125068670

版权

本文详细介绍了如何在前端页面中实现下拉选择框默认加载数据并支持搜索功能。通过在父组件中初始化下拉数据，并使用事件总线传递默认值到子组件。子组件接收到默认值后，实现搜索接口调用，同时在重置和提交表单时处理相关数据。此功能涉及Vue.js的组件通信、数据绑定和接口调用等技术。

摘要由CSDN通过智能技术生成

需求：就是在选择下拉厂商在调用接口---一进页面先调用默认的‘ZK’数据--还能进行对应的搜索

这个功能的主要思路就是---在调用的时候默认传入下拉的数据---在提交的时候再调用搜索的接口（传入的数据即可。）

注：这里的厂商在一个页面接口调用二次---需要注意绑定的v-model要不一样，此外还有在请求回来数据的时候做一个浅拷贝。（不细讲）

父组件：把下拉的数据默认的ZK的传入子组件---调用接口

 



 <el-form ref="formHistory"
            :model="formHistory"
            label-width="90px"
            size="small"
            :inline="true">
            <el-form-item label="厂商">
              <el-select v-model="manufacturer"  //初始绑定的值
                clearable
                placeholder="请选择厂商"
                @change="changeDeviceVendor">
                <el-option v-for="dict in peopleOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-form>


//在挂载的时候就给绑定的下拉设置为默认的！


  //1.设备厂商：
    this.getDicts("accress_brand").then((response) => {
      let temp = JSON.parse(JSON.stringify(response.data))
      this.deviceVendorOptions = response.data;
      this.peopleOptions = temp
      this.manufacturer = response.data[0].dictValue
      this.$bus.$emit('manufacturer', response.data[0].dictValue)
    });

子组件：

  beforeDestroy () {
    this.$bus.$off('manufacturer', this.manufacturer)
  },
  mounted () {
    this.$bus.$on('manufacturer', this.manufacturer)
  },
--------------------------------
在调用接口的时候---在初始调用接口的时候/切换下拉的时候==》需要清除搜索的数据！！！！
 manufacturer (val) {
      this.query.personPin = ''
      this.query.date = ''
      this.query.startDate = ''
      this.query.endDate = ''
      this.query.deviceVendor = val
      accessRecordList(this.query).then(res => {
        this.tableData = res.data.list
      })
    },

----------------------------------
// 注意：在重置的时候可能存在厂商被清空---所以采取一个临时变量


 reset () {
      let temp = this.query.deviceVendor
      this.query = {
        personPin: '',
        date: ''
      }
      this.query.deviceVendor = temp
      this.query.startDate = ''
      this.query.endDate = ''
      this.manufacturer(this.query.deviceVendor);
    },


--------------------------调用提交接口
 onSubmit () {
      if (this.query.date?.length == 2) {
        this.query.startDate = this.query.date[0]
        this.query.endDate = this.query.date[1]
      } else {
        this.query.startDate = ''
        this.query.endDate = ''
      }
      accessRecordList(this.query).then(res => {
        this.tableData = res.data.list
      }).catch(error => {
        console.log(error);
      })

    }