vue 之后台 表单等父子表单的联动

vue 之后台 表单等父子表单的联动

• 需求：就是针对业务品种勾选的时候，可以影响子业务品种，父业务品种有着8种，而着8种父业务下，对应的子业务有着10几种，那么只有勾选父业务的时候，才显示对应的子业务！
• 需求2：就是父业务点击 X 的那个清除按钮的时候，需要清除掉自身的值，需要清除掉子业务选中的值
• 需求3：点击子业务点击 X 的那个清除按钮的时候，需要清除掉自身的值
• 需求4：父子业务改变的时候，下面还有数十种业务的改变，前提是需要先把选中的值清空
• 针对业务品种 这个东西，封装为一个组件的时候，那么由于是 v-model="value" 数据双向绑定的，需要再封装的组件内部清空，于是这就需要借助 vuex + props 的方式 去清除掉当前组件的值了！

组件下拉菜单

<!-- 下拉菜单 -->
<template>
  <div class="xSelect_container">
    <el-select
      :clearable="isClearable"
      :disabled="isDisabled"
      class="xSelect_wrap"
      :style="
        labelWType == 1
          ? 'width: calc(100% - 94px)'
          : 'width: calc(100% - 112px)'
      "
      style="height: '32px'"
      v-model="value"
      :placeholder="defaultConfigData.placeholder"
      @change="selectChange"
      @clear="selectClear"
    >
      <el-option
        v-for="item in defaultConfigData.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <span
      :style="labelWType == 1 ? 'width:94px' : 'width:112px'"
      class="xSelect_label"
      ><span class="xSelect_check" v-show="isCheck"></span>
      <span>{{ defaultConfigData.title }}</span>
    </span>
  </div>
</template>

<script>
export default {
  name: "SelectCom",
  components: {},
  props: {
    //给 label 设置宽度 默认94 类型2 为110
    labelWType: {
      type: Number,
      default: 1,
    },
    defaultConfig: {
      type: Object,
      default: () => {},
    },
    isCheck: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 是否禁用
    isDisabled:{
      type:Boolean,
      default:false,
    },
    // 是否清空
    isClearable:{
      type:Boolean,
      default:true,
    },
    //当前 组件的title
    titleType: {
      type:String,
      title: "",
    },
    commomClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: "",
      defaultConfigData: this.defaultConfig,
    };
  },

  watch: {
    commomClear(val) {
    // 清空掉信用证 
      if (val && this.titleType == "creditCode") {
        this.value = "";
        this.$store.commit("claerCCode", false);
      }
    },
  },
  created() {
  },
  methods: {
    //下拉菜单选中的值 发生改变
    selectChange() {
      this.$emit("selectChange", this.value);
    },
    //下拉菜单 点击清空
    selectClear() {
      this.$emit("selectClear");
      if (this.selectType == "fatherType") {
        //单笔
        this.$store.commit("isClearSonType", true);
        this.$emit("selectChange", this.value);
      }
    },
  },
};
</script>
<style  lang="scss" scoped>
// input的宽高
::v-deep .el-input__inner {
  height: 32px!important;
}
</style>

vuex之中的数据

//信贷管理  新增
const creditAdd = {
  state: {
    claerCCode: "",
  },
  mutations: {
    claerCCode (state, payload) {
      state.claerCCode = payload
    },
  }
}

export default creditAdd;

使用组件

• 01：需要从 vuex 之中 拿到那个是否清除的状态
• 02：再使用组件的时候，需要使用 props 传递进去一个 清除当前 组件的选中的值的状态 (01步的状态)
• 03：并且titleType 传递一个title属性，证明是当前改组件需要清除，避免清除掉别的组件的数据
• 04：大体是这样的思路