vue组件 下拉框分页

上图
下拉框分页.png

和公司签了保密协议啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈所以我把数据全部马赛克了哈哈哈哈哈哈哈哈哈哈哈尼萌就当有就成~~
输入框前面有个label,和页面中的其他label保持一致;分页的组件是vue-element-admin中自带的pagination,用elementui的el-pagination也可~~一样的道理反正就是各种传值

组件内容 ↓






父组件
template 中 ↓

        
          
        

script 中 ↓


最后叮嘱一句,最好不要直接在父组件中控制子组件的inputValue。会有很多问题都是血的教训哈哈哈哈哈哈哈

如果现在有二级联动的需求,选择左边的数据,更改右边的数据。
那么点击左侧的列表选定一个值,右侧才可以进行操作。左侧换值,右侧清空。
这个时候,我们不要直接用inputValue来操纵输入框的值。最好再设置一个其他的变量,比如flag。

如果左边传的值发生变化,父组件中的this.flag = !this.flag
在子组件中watch这个flag

watch: {
  flag(n,o) {
    if(n != o) {
      this.inputValue = '';
    }
  }
}

tada~~~一个下拉框分页的组件就完成啦~

你可能感兴趣的:(vue组件 下拉框分页)