vue 开发笔记

1. 使用element 嵌套弹窗+登录表单时 含账号、验证码、密码输入框，重新修改密码时--弹窗--验证码 和密码输入框 会默认回填值：

解决方法：
  添加：el-input 添加：  autocomplete="off" （未解决）
  添加：readonly 默认 是 true,  焦点事件触发时--重置为false--(只解决新增时--回填)
最后方案：
    监听弹窗触发，把绑定到data上的数据，使用this.$data 清空赋值的所有属性
       密码输入框添加：
    autocomplete="new-password"

感觉也可以用：清空所有绑定到data的数据后，调用 this.$forceUpdate() // 迫使 Vue 实例重新渲染

2.element ui input 嵌套弹窗+form表单，el-input  v-model绑定默认数据删除不了/也修改不了的情况 

思路：出现这种情况是，vue 不能检测到对象属性的添加或者删除导致视图无法更新
解决方法：
 使用input事件，调用vm 实例方法：this.$forceUpdate()  重新渲染

<el-form-item label="详细地址" prop="locationAddress">
            <el-input
              type="text"
              name="locationAddress"
              autocomplete="off"
              v-model.trim="storehouseForm.locationAddress"
              clearable
              placeholder="请输入"
              @input="inputLocationAddress($event)" />
          </el-form-item>
// 修改仓库--详细地址
 inputLocationAddress(e) {
      // 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
      this.$forceUpdate()
    },  

3. iframe 与vue 项目 交互传参

方法一：使用URL参数传递
最简单的一种方式是使用URL参数传递。在父页面中，我们可以通过修改iframe的src属性来传递参数。例如：
// 对象参数转换成 url 拼接地址 a=1&b=2&
    objectToUrlString(obj) {
      let url = ""

      for (let key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          const value = encodeURIComponent(obj[key]) // 编码属性值

          url += `${key}=${value}&`
        }
      }

      return url
    },

<iframe src="child.html?param1=value1&param2=value2"></iframe>

在子页面中，我们可以通过JavaScript获取到URL参数，并进行相应的处理。例如：

getLocationSrcUrl() {
      console.log("入库报表列表 window.location.href ", window.location.href)
      let flag = window.location.href.indexOf("?")
      if (flag > 0) {
        var params = window.location.search.substring(1).split("&")
        var paramObj = {}

        for (var i = 0; i < params.length; i++) {
          let item = decodeURIComponent(params[i])
          var pair = item.split("=")

          paramObj[pair[0]] = decodeURIComponent(pair[1])
        }
        console.log("paramObj ", paramObj)
        return paramObj
      }
    }

方法三：使用localStorage或sessionStorage传递
除了使用URL参数和postMessage方法传递数据外，我们还可以使用localStorage或sessionStorage来进行数据传递。

在父页面中，我们可以将数据存储到localStorage或sessionStorage中：

localStorage.setItem("param1", "value1");sessionStorage.setItem("param2", "value2");
在子页面中，我们可以通过以下代码来获取存储的数据：

var param1 = localStorage.getItem("param1");var param2 = sessionStorage.getItem("param2");

注意，由于安全原因，不同域的页面之间无法共享 sessionStorage，因此只有在同源的页面之间才能使用此方法进行操作。如果需要与不同域的页面进行交互，可以考虑使用其他方式，例如使用 postMessage 发送消息或使用 WebSocket 进行通信。

4. vue2 生命周期执行顺序：  

  不使用 keep-alive 先后顺序：
created/mounted 
 使用keep-alive ，页面或组件第一次执行顺序
create/ mounted/activated
缓存页面组件切换出去再回来
 deactivated/activated

5. vue2 路由加上keep-alive引入的iframe页面再次进来不刷新解决方案  

可以使用 vue-ls 插件， 通过监听存储本地参数的变化，来触发重新调用接口 刷新页面数据
  
vue-ls 监听 本地 sessionStorage 变化 

Vue.ls.set(name, value, expire)
Vue.ls.get(name, def) // 只读 ls.set(key) 若直接读本地 key 则直接读不到返回null

6. 跳转到指定位置  

方法： 

chooseTree(code) {
      this.treeIndex = code
      if (this.$refs[code]) {
        // 滚动到指定为止
        // 顶部
        this.$refs[code].scrollIntoView()
        // 底部
        // this.$refs[code].scrollIntoView(false)
        // 中间
        // this.$refs[code].scrollIntoView({ behavior: "auto", block: "center" })
      }
    },

10. el-table 组件封装 

方式一：针对 el-table 属性与方法 进行封装：
<template>
  <div>
    <el-table
      border
      v-loading="loading"
      ref="table"
      :data="dataList"
      tooltip-effect="dark"
      :row-key="getRowKeys"
      :expand-row-keys="expandRowKeys"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
      :max-height="height"
      :size="size"
    >
      <slot name="table"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "BaseTable",
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    rowKey: {
      type: String,
      default: () => {
        return ""
      }
    },
    expandRowKeys: {
      type: Array,
      default: () => {
        return []
      }
    },
    height: {
      type: Number,
      default: 370
    },
    size: {
      type: String,
      default: "mini"
    }
  },
  methods: {
    getRowKeys(row) {
      if (this.rowKey) {
        return row[this.rowKey]
      } else {
        return row.id
      }
    },
    handleSelectionChange(val) {
      this.$parent.selectionData = val
      this.$emit("selectionDataList", val)
    },
    rowClick(row, event, column) {
      this.$parent.selectionData = row
      this.$refs.table.toggleRowSelection(row)
      this.$emit("handleRowClick", row)
    },
    checkedClick(row, toggle = true) {
      this.$refs.table.toggleRowSelection(row, toggle)
    },
    // 清空选项
    clearSelection() {
      this.$refs.table.clearSelection()
    }
  }
}
</script>

方式二： 对el-table / el-table-column 属性和方法进行封装

11.  el-table 勾选数据反显   

// 再次编辑--回显已勾选的数据
    toggleSelection(rows) {
      if (rows) {
        this.dataList.forEach((val) => {
          rows.forEach((row) => {
            if (val.id === row.id) {
          // 注意反选数据 是操作的 当前 table的数据，不是 父级传递的数据
              this.$refs.multipleTable.toggleRowSelection(val)
            }
          })
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },