el-tree - 选中父级,子级不选中

组件

<!--
  选中父级,子级不选中
-->
<template>
    <div>
      <el-tree
        :data="data"
        :props="props"
        :check-strictly="checkStrictly"
        ref="tree"
        :node-key="nodeKey"
        @check="getCheckedKeys"
        show-checkbox
        :default-expanded-keys="Expandeds"
        :default-checked-keys="Selecteds">
      </el-tree>
    </div>
</template>
<script>
export default {
  props: {
    /* checkStrictly: {
      type: Boolean,
      default () {
        return false
      }
    }, */
    nodeKey: {
      type: String,
      default () {
        return []
      }
    },
    Selecteds: {
      type: Array,
      default () {
        return []
      }
    },
    Expandeds: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Array,
      default () {
        return []
      }
    },
    // 树节点配置选项
    props: {
      type: Object,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      TreeData: [],
      AllData: [],
      flag: false,
      checkStrictly: true
    }
  },
  watch: {
    Selecteds () {
      // this.TreeData = this.Selecteds
      let that = this
      this.checkStrictly = true
      this.$nextTick(() => {
        that.TreeData = that.Selecteds
        that.$refs.tree.setCheckedKeys(that.Selecteds)
        // that.checkStrictly = false
      })
    }
  },
  computed: {
    data () {
      return this.options
    }
  },
  methods: {
    orgCheckChange (data, checked, indeterminate) {
    },
    /* 获取当前树的ID值 */
    getCheckedKeys (node, keys) {
      // console.log(node)
      // console.log(keys)
      let that = this
      this.flag = true
      // let checkedKeys = keys.checkedKeys
      // let halfChecked = keys.halfCheckedKeys
      // let checkArr = checkedKeys.concat(halfChecked)
      // this.TreeData = checkedKeys
      // this.AllData = checkArr
      this.setNode(this.$refs.tree.getNode(node.locationId))
      this.$nextTick(function () {
        that.AllData = that.$refs.tree.getCheckedKeys()
      })
    },
    // 递归设置子节点和父节点
    setNode (node) {
      if (node.checked) {
        // 如果当前是选中checkbox,则递归设置父节点和父父节点++选中
        this.setParentNode(node)
      } else {
        // 如果当前是取消选中checkbox,则递归设置子节点全部取消选中
        this.setChildNode(node)
      }
    },
    // 递归设置父节点全部选中
    setParentNode (node) {
      if (node.parent) {
        for (const key in node) {
          if (key === 'parent') {
            node[key].checked = true
            this.setParentNode(node[key])
          }
        }
      }
    },
    // 递归设置子节点全部取消选中
    setChildNode (node) {
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach(item => {
          item.checked = false
          this.setChildNode(item)
        })
      }
    }
  }
}
</script>

  翻  牌  子

Vue - 强制刷新组件(销毁并重置)

<el-dialog :visible.sync="reportDialogVisible">
      <Report :reportInfo="reportInfo" v-if="hackReset"></Report>
</el-dialog>
// 声明hackReset,利用true或者false实现重建或者销毁
this.hackReset = false;// 销毁组件
this.$nextTick(() => {
    this.hackReset = true;// 重建组件
});

vue - el-form 的多层循环表单验证

html

<el-form :model="formObj" :rules="rules" ref="ruleForm">
  <el-form-item :label="'护理记录项目配置:'" label-width="180px">
    <template v-for="(formItem, index) in formObj.formDictExtendDoList">
      <div class="hljl-container" :key="formItem.id">
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="'字段名称:'"
              label-width="90px"
              :rules="rules.fieldName"
              :prop="'formDictExtendDoList.'+index+'.fieldName'"
            >
              <el-input
                v-model.trim="formItem.fieldName"
                type="text"
                :clearable="true"
                maxLength="100"
                placeholder="请输入"
              />
              <!--@blur="isRepeat(formItem, index, 'fieldName')"-->
            </el-form-item>
          </el-col>
          <template
            v-for="(child, index1) in formItem.item"
            v-show="formItem.type === 2"
          >
            <el-col :span="8" :key="child.id">
              <el-form-item
                :label="'选项' + (index1+1) + ':'"
                label-width="90px"
                :rules="rules.value"
                :prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
              >
                <el-input
                  v-model.trim="child.value"
                  @input="forceUpdate"
                  :clearable="true"
                  type="text"
                  maxlength="20"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </div>
    </template>
  </el-form-item>
</el-form>

js

  翻  牌  子

vue - 循环出来的 el-input 无法输入

<!--循环出来的-->
<el-input
  v-model.trim="child.value"
  @input="forceUpdate"
  :clearable="true"
  type="text"
  maxlength="20"
  placeholder="请输入"
/>
// 强制重新渲染
forceUpdate () { 
    this.$forceUpdate() 
}

js/jquery - 获取父级页面元素

// js 取父窗口的元素
window.parent.document.getElementById("idName");
// jquery 取父窗口的元素
$('#idName', window.parent.document);
// jquery 取父窗口的父窗口的元素
$('#idName', window.parent.parent.document);

vue - 比较两个Json对象是否相等

// 内容是否有修改
      // true:未改变;false:改变了
      isChange() {
        if(this.Compare(this.dialog.detail.form, this.dialog.detail.oldForm)){
          console.log('未改变');
        }else{
          console.log('改变');
        }
        return this.Compare(this.dialog.detail.form, this.dialog.detail.oldForm);
      },
      /**************************************比较json-start***************************************/
      isObj(object) {
        return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
      },
      isArray(object) {
        return object && typeof(object) == 'object' && object.constructor == Array;
      },
      getLength(object) {
        var count = 0;
        for(var i in object) count++;
        return count;
      },
      CompareObj(objA, objB, flag) {
        for(var key in objA) {
          if(!flag) //跳出整个循环
            break;
          if(!objB.hasOwnProperty(key)) {
            flag = false;
            break;
          }
          if(!this.isArray(objA[key])) { //子级不是数组时,比较属性值
            if(objB[key] != objA[key]) {
              flag = false;
              break;
            }
          } else {
            if(!this.isArray(objB[key])) {
              flag = false;
              break;
            }
            var oA = objA[key],
              oB = objB[key];
            if(oA.length != oB.length) {
              flag = false;
              break;
            }
            for(var k in oA) {
              if(!flag) //这里跳出循环是为了不让递归继续
                break;
              flag = this.CompareObj(oA[k], oB[k], flag);
            }
          }
        }
        return flag;
      },
      Compare(objA, objB) {
        if(!this.isObj(objA) || !this.isObj(objB)) return false; //判断类型是否正确
        if(this.getLength(objA) != this.getLength(objB)) return false; //判断长度是否一致
        return this.CompareObj(objA, objB, true); //默认为true
      },
      /**************************************比较json-end***************************************/