vue级联组件改造-根据勾选内容得顺序返回结果

<el-cascader :options="options" @change="cascaderChange($event)" ref="cascader"
                   collapse-tags
                   :props="{ multiple: true ,value:'label'}"
                   clearable></el-cascader>



 cascaderChange(val) {
      let auditPerson = {};
      auditPerson=this.getCascader(val,this.$refs.cascader.getCheckedNodes());
      debugger
      this.auditPersonIdsName = auditPerson.auditPersonIdsName;	//回显的数据
    },
    getCascader(val, AAA,type) {
      let auditPerson = {
        auditPersonIds: [],
        auditPersonIdsName: [],
      };

      if(this.tempData.length >= 0 && this.tempData.length <= val.length) {
        val.forEach((item)=> {
          if(this.tempData.indexOf(item) == -1) {
            this.tempData.push(item)
          }
        })
      }else if(val.length < this.tempData.length
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue级联选择器使用v-model来实现双向数据绑定。v-model指令在内部使用了value和input事件,使得父组件能够通过v-model来控制子组件,并且子组件的变化也可以反馈给父组件。 在级联选择器的父组件中,你可以使用v-model来绑定一个变量,这个变量将会被用来存储当前所选的。例如: ```html <template> <div> <cascade-selector v-model="selectedValue"></cascade-selector> </div> </template> <script> import CascadeSelector from './CascadeSelector.vue'; export default { components: { CascadeSelector }, data() { return { selectedValue: '' }; } } </script> ``` 在子组件CascadeSelector中,你可以使用props接收父组件传递的,并在选择发生变化时,通过$emit('input', value)来触发父组件的input事件,从而更新父组件的数据。例如: ```html <template> <div> <select v-model="selected" @change="handleChange"> <option value="">请选择</option> <option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</option> </select> </div> </template> <script> export default { props: ['value'], data() { return { selected: '' }; }, computed: { options() { // 返回级联选择器的选项数据 } }, mounted() { // 初始化选中 this.selected = this.value; }, methods: { handleChange() { this.$emit('input', this.selected); } } } </script> ``` 这样,父组件和子组件之间就建立了双向数据绑定,父组件中的selectedValue会随着子组件的选择发生变化而更新。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值