如何在element组件中的select下拉选择框，首次赋值时触发@selected事件(watch的使用和computed计算属性的使用）

项目中遇到一个下拉选择框在选择后带出其关联的选择框的值。

进入这个界面会自动赋值给收款供应商，通过选择如何手动选择收款供应商会自动带出收款银行名称和账号
要求进去这个页面时带出收款供应商时，同时带出收款银行名称和账号

watch: {
    //generatingForm.supplierName是收款供应商绑定的值
    'generatingForm.supplierName': {
      handler(newName, oldName) {
        this.createPaymenSupplierNameCombo(this.rowSelect.supplierName)
        console.log(this.generatingForm.supplierName)
        console.log('workKKKKKKKKKKKKKK')
      },
      //deep: true,
      // immediate: true
    }
  }

监听收款供应商的值，在第一次赋值时就调用@selected事件，这样就可以完成上面的要求

当清除收款供应商的值时，收款银行名称和地址都不会清除，也无法手动清除

watch: {
    'generatingForm.supplierName': {
      handler(newName, oldName) {
        if(newName == '') {
          this.generatingForm.acctCodeName = ''
          this.generatingForm.acctCode = ''
        }else {
          this.createPaymenSupplierNameCombo(this.rowSelect.supplierName)
          console.log(this.generatingForm.supplierName)
        }
      },
      //deep: true,  深度监听。这个不能乱用，这样写之前就出现了问题，这样可能导致generatingForm里其它属性变化也能产生监听，导致出错。
      // immediate: true   第一次绑定的时候就启用
    }
  }

当收款供应商的值为空时，直接将关联的设置为空值

computed

负责使用data中的数据, 但是注意 只能用, 不能改! 使用完后 记得将结果return

setter函数

有一个参数 newValue, 负责接收传进来的值, 可以使用这个newValue给data中的数据进行操作:

computed {
    objArr: {
        get() { return this.options;},
        set(newValue) {
            console.log('newValue', newValue)
            this.options.push(newValue);
        }
    }
}

这是二种使用方式

//面包屑
<el-breadcrumb separator="/" class="breadCrumbContainer">
  <template v-for="item in breadCrumbArr" :key="item.name">
  <el-breadcrumb-item>{{item.name}}</el-breadcrumb-item>
</template>
</el-breadcrumb>

// 计算属性的使用方法
//breadCrumbArr这个不用在data再次注册
  computed: {
    breadCrumbArr() {
      const menus = this.$store.state.login.userMenus
      const pathCurrent = this.$route.path
      const arr = createBreadCrumbArr(menus, pathCurrent)
      return arr
    }
  },