【监听下拉框传参获取数据】

TWenYuan2024-01-28 2:35

一：

写好结构

javascript 复制代码

          <el-form-item label="级别" prop="level">
            <el-select v-model="form.level" placeholder="请选择级别">
              <el-option
                v-for="item in levelList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上级">
            <el-select v-model="form.parentId" clearable placeholder="上级">
              <el-option
                v-for="item in parentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

二：data(){}的数据

javascript 复制代码

        levelList:[{
          label: '一级',
          value: '1'
        },{
          label: '二级',
          value: '2'
        },{
          label: '三级',
          value: '3'
        }],
        
        form: {
          name: '',
          code: '',
          remark: '',
          level: '',
          parentId: ''
          }
          
        parentList: [],

三：监听特定的值

javascript 复制代码

    watch: {
      'form.level': {
        immediate: true,
        // handler:是一个回调函数，即监听到变化应该执行的函数
        handler(value) {
          if (value) {
            // 清空数据
            this.form.parentId = ''
            this.getDataTableList(value)
          }
        }
      }
    },

四：传被监听到的参数id ,调接口获取下拉框数据

javascript 复制代码

    getDataTableList(parentId) {
      getParentData(parentId - 1).then(response => {
        if (response.success) {
          console.log(response);
          this.parentList = response.data
        }
      })
    },