elementui的select下拉框,切换别的下拉框,重置某一个下拉框选中的值

父级下拉框联动下面的表格数据,表格数据属于子数据。
修改上面的下拉框数据,会重新渲染下面的表格数据,有个父子联动关系。

遇到的问题:
表格里面的下拉框之前选中的数据,重新渲染时,发现上一次选中的数据,也带了出来。

解决方案:
先清空表格数据,加上定时器,然后再加入新数据。

_this.tableData = []
setTimeout(() => {
        _this.loading1 = false
        const arr = JSON.parse(JSON.stringify(_this.arIdOPtions))
        arr.forEach(item => {
          if (_this.describeForm.arId === item.id) {
            _this.tableData = item.oaArDetailsVo
          }
        })
      }, 1000);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以考虑使用 `watch` 监听选中,并在回调函数中更新下一级的选项。 首先,定义三个数组用于存储选项: ```js data() { return { options1: [], // 第一级选项 options2: [], // 第二级选项 options3: [], // 第三级选项 selected1: null, // 第一级选中 selected2: null, // 第二级选中 selected3: null // 第三级选中 } } ``` 然后,在 `mounted` 钩子中初始化第一级选项: ```js mounted() { // 初始化第一级选项 this.options1 = [ { label: '选项1', value: 1 }, { label: '选项2', value: 2 }, { label: '选项3', value: 3 } ] } ``` 接下来,使用 `watch` 监听第一级选中,并根据选中动态更新第二级选项: ```js watch: { // 监听第一级选中 selected1(newValue) { // 根据选中动态更新第二级选项 if (newValue === 1) { this.options2 = [ { label: '选项1-1', value: 11 }, { label: '选项1-2', value: 12 }, { label: '选项1-3', value: 13 } ] } else if (newValue === 2) { this.options2 = [ { label: '选项2-1', value: 21 }, { label: '选项2-2', value: 22 }, { label: '选项2-3', value: 23 } ] } else if (newValue === 3) { this.options2 = [ { label: '选项3-1', value: 31 }, { label: '选项3-2', value: 32 }, { label: '选项3-3', value: 33 } ] } else { this.options2 = [] } // 重置第二级和第三级选中 this.selected2 = null this.selected3 = null } } ``` 最后,再使用 `watch` 监听第二级选中,并根据选中动态更新第三级选项: ```js watch: { // 监听第二级选中 selected2(newValue) { // 根据选中动态更新第三级选项 if (newValue === 11) { this.options3 = [ { label: '选项1-1-1', value: 111 }, { label: '选项1-1-2', value: 112 }, { label: '选项1-1-3', value: 113 } ] } else if (newValue === 12) { this.options3 = [ { label: '选项1-2-1', value: 121 }, { label: '选项1-2-2', value: 122 }, { label: '选项1-2-3', value: 123 } ] } else if (newValue === 13) { this.options3 = [ { label: '选项1-3-1', value: 131 }, { label: '选项1-3-2', value: 132 }, { label: '选项1-3-3', value: 133 } ] } else if (newValue === 21) { this.options3 = [ { label: '选项2-1-1', value: 211 }, { label: '选项2-1-2', value: 212 }, { label: '选项2-1-3', value: 213 } ] } else if (newValue === 22) { this.options3 = [ { label: '选项2-2-1', value: 221 }, { label: '选项2-2-2', value: 222 }, { label: '选项2-2-3', value: 223 } ] } else if (newValue === 23) { this.options3 = [ { label: '选项2-3-1', value: 231 }, { label: '选项2-3-2', value: 232 }, { label: '选项2-3-3', value: 233 } ] } else if (newValue === 31) { this.options3 = [ { label: '选项3-1-1', value: 311 }, { label: '选项3-1-2', value: 312 }, { label: '选项3-1-3', value: 313 } ] } else if (newValue === 32) { this.options3 = [ { label: '选项3-2-1', value: 321 }, { label: '选项3-2-2', value: 322 }, { label: '选项3-2-3', value: 323 } ] } else if (newValue === 33) { this.options3 = [ { label: '选项3-3-1', value: 331 }, { label: '选项3-3-2', value: 332 }, { label: '选项3-3-3', value: 333 } ] } else { this.options3 = [] } // 重置第三级选中 this.selected3 = null } } ``` 最终,将三个下拉框组件化,并绑定选中即可: ```html <template> <div> <select v-model="selected1"> <option value="">请选择第一级</option> <option v-for="option in options1" :value="option.value">{{option.label}}</option> </select> <select v-model="selected2"> <option value="">请选择第二级</option> <option v-for="option in options2" :value="option.value">{{option.label}}</option> </select> <select v-model="selected3"> <option value="">请选择第三级</option> <option v-for="option in options3" :value="option.value">{{option.label}}</option> </select> </div> </template> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xingchen678

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值