功能使用说明

下拉框select和单选框radio新增字段关联属性，何为关联属性呢？
如：当下拉框的内容为1时，让姓名输入框隐藏，让性别输入框展示。
大家应该明白了吧，此字段是根据当前选中的值来控制其他字段是否展示和隐藏。
注意：如果下拉框有三个选项【1、2、3】，当=1时设置了姓名输入隐藏，则=2和=3时需要设置姓名输入框显示。

拖拽表单-新增关联属性

1、formItemProperties新增关联属性

控制只有类型=select和radio的时候进行展示。

<a-form-item
          v-if="selectItem.type === 'select' || selectItem.type === 'radio'"
          label="关联属性"
        >
          <KChangeOption
            v-model="selectItem.linkFieldSet"
            type="linkFieldSet"
            :mdata="options.options"
          />
        </a-form-item>

2、KChangeOption新增关联属性内容

页面属性：

<a-row v-if="type === 'linkFieldSet'" :gutter="8">
      <span v-for="(val, index) in value" :key="index">
        <div class="option-change-box">
          <a-col :span="20">
            <a-select
              :options="mdata"
              v-model="val.linkField"
              placeholder="选择关联属性"
          /></a-col>
          <a-col :span="4"
            ><div @click="handleDelete(index)" class="option-delete-box">
              <a-icon type="delete" /></div
          ></a-col>
          <a-col :span="24"
            ><a-input
              v-model="val.showLinkField"
              placeholder="显示(数据字段，逗号分割)"
            ></a-input
          ></a-col>
          <a-col :span="24"
            ><a-input
              v-model="val.hideLinkField"
              placeholder="隐藏(数据字段，逗号分割)"
            ></a-input>
          </a-col>
        </div>
        <a-divider style="border-color: #13c2c2; margin: 4px 0" dashed />
      </span>
      <a-col :span="24"><a @click="handleAddLinkField">增加</a></a-col>
    </a-row>

新增方法：

handleAddLinkField() {
      let addData = [];
      if (this.value == undefined) {
        addData = [
          {
            linkField: "",
            showLinkField: "",
            hideLinkField: "",
          },
        ];
      } else {
        addData = [
          ...this.value,
          {
            linkField: "",
            showLinkField: "",
            hideLinkField: "",
          },
        ];
      }
      this.value = addData;
      console.log(addData);
      this.$emit("input", addData);
    },

3、this.$emit(‘input’,val)

子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了
而子组件也可以通过$emit(‘input’,false)，去改变父组件中v-model 和子组件中 value 的值。
实战案例：
1、父组件

<parent title="用户名" v-model="username"></parent>

2、子组件

data () {
        return {
            val:""
        }
    },
    methods:{
        changeData:function(){
            console.log(111);
            this.$emit('input',this.val);
        }
    }

其中，子组件this.$emit(‘input’,this.val); v-model 绑定的是 input 事件
vue 再父子组件传值时，除了传统的父组件：属性去传值外，还可以使用父组件v-model传值，子组件props[‘value’]接收

拖拽表单-控制关联字段

1、源码解析及改造

通过源码解析，我们发现当点击字段属性都会响应一个方法：handleChange
代码跟踪：1、k-form-build -> 2、KFormBuild-index -> 3、KFormBuild-buildBlocks -> 4、KFormItem-index
我们发现-handleChange中只有value和key两个参数，两个参数无法获取当前组件的其他属性，此处我们对handleChange进行改造，增加第三个参数 record（当前组件的详细信息）

2、实现关联控制

通过上面的代码，我们通过一层层的响应，最终在使用k-form-build的组件中通过handleChange获取相关参数。

    <k-form-build
      ref="kfb"
      :value="jsonData"
      :dynamicData="dynamicData"
      @change="handleChange"
    />


handleChange(value, key, record) {
      if (record.linkFieldSet != undefined) {
        record.linkFieldSet.forEach((item) => {
          if (item.linkField == value) {
            let hideLinkField = item.hideLinkField;
            let showLinkField = item.showLinkField;
            // console.log('***---')
            // console.log(hideLinkField)
            // console.log(showLinkField) 
            if (hideLinkField != undefined) {
              this.$refs.kfb.hide(hideLinkField.split(","));
            }
            if (showLinkField != undefined) {
              this.$refs.kfb.enable(showLinkField.split(","));
            }
          }
        });
      }
    },

青锋Cloud VUE微服务架构在线文档

新增字段关联控制-select和radio