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

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

• 需求：就是针对业务品种勾选的时候，可以影响子业务品种，父业务品种有着8种，而着8种父业务下，对应的子业务有着10几种，那么只有勾选父业务的时候，才显示对应的子业务！
• 需求2：就是父业务点击 X 的那个清除按钮的时候，需要清除掉自身的值，需要清除掉子业务选中的值
• 需求3：点击子业务点击 X 的那个清除按钮的时候，需要清除掉自身的值
• 需求4：父子业务改变的时候，下面还有数十种业务的改变，前提是需要先把选中的值清空
• 针对业务品种 这个东西，封装为一个组件的时候，那么由于是 v-model="value" 数据双向绑定的，需要再封装的组件内部清空，于是这就需要借助 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 == "insideCreaditLineQGroup") {
        this.value = "";
        this.$emit("changeInsideCreaditLineQGroup", false);
      }
      if (val && this.titleType == "insideCreaditLineQPlate") {
        this.value = "";
        this.$emit("changeInsideCreaditLineQPlate", 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>

使用组件

• html

          <BQuerySelectCom
            :defaultConfig="group"
            @selectChange="groupChange"
            :isClearable="false"
            titleType="insideCreaditLineQGroup"
            :commomClear="insideCreaditLineQGroup"
            @changeInsideCreaditLineQGroup="changeInsideCreaditLineQGroup"
          />
          <BQuerySelectCom
            :defaultConfig="plate"
            @selectChange="plateChange"
            :isClearable="false"
            titleType="insideCreaditLineQPlate"
            :commomClear="insideCreaditLineQPlate"
            @changeInsideCreaditLineQPlate="changeInsideCreaditLineQPlate"
          />

    // 集团
    groupChange(val) {
      this.groupVal = val;
      this.insideCreaditLineQPlate = true; // 清除板块
    },
    changeInsideCreaditLineQGroup(flag){
      this.insideCreaditLineQGroup = flag;
    },

• data

      group: { title: "集团：", placeholder: "请选择", options: [] },
      plate: { title: "板块：", placeholder: "请选择", options: [] },
      // 清空的值
      insideCreaditLineQGroup:false,
      insideCreaditLineQPlate:false,
      groupVal:"",
      plateVal:"",  

• methods

    // 集团
    groupChange(val) {
      this.groupVal = val;
      this.insideCreaditLineQPlate = true; // 板块
      this.plateVal = "";
    },
    changeInsideCreaditLineQGroup(flag){
      this.insideCreaditLineQGroup = flag;
    },
    // 板块
    plateChange(val) {
      this.plateVal = val;
    },
    changeInsideCreaditLineQPlate(flag){
      this.insideCreaditLineQPlate = flag;
    },